# \[Solved\] Getting rid of Text Margin?

**URL:** https://forum.pinegrow.com/t/solved-getting-rid-of-text-margin/2829
**Category:** Beginners
**Created:** [March 9, 2019, 4:50am UTC](https://forum.pinegrow.com/t/solved-getting-rid-of-text-margin/2829 "2019-03-09T04:50:16Z")
**Posts on this page:** 6
**Page:** 1

<div class="post-metadata">

### Author: ![jtkay](https://avatars.discourse-cdn.com/v4/letter/j/9f8e36/32.png) [@jtkay](https://forum.pinegrow.com/u/jtkay)
#### Post date: [March 9, 2019, 4:50am UTC](https://forum.pinegrow.com/t/solved-getting-rid-of-text-margin/2829/1 "2019-03-09T04:50:16Z")

</div>

How do I get rid of the margin around this text? I don 't see any margin in the Style Attribute. Thanks.

 ![Text%20Margin](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/2/264fc4db81a9f2d03a315e5a5c86a913d18d7b3d.png)

---

<div class="post-metadata">

### Author: ![schpengle](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/schpengle/32/238_2.png) [@schpengle](https://forum.pinegrow.com/u/schpengle)
#### Post date: [March 9, 2019, 1:23pm UTC](https://forum.pinegrow.com/t/solved-getting-rid-of-text-margin/2829/2 "2019-03-09T13:23:47Z")

</div>

Well, If you see no margin explicitly declared in the styling then it is either,

1. The DEFAULT styling that you NEVER see - but which is applied to ALL ELEMENTS by the Browser.

2. you are using a Framework and IT is applying a default style to this ELEMENT.

3. You have a USER styles, styles sheet applied by your browser that you have set up and forgot about .  
There May be a 4, but I dont know what that is 🙂

You dont see EITHER of these first two declared as are these are browser defaults and ALWAYS used or framework helper class styles - and so if using Pinegrow, click _show styles from Bootstrap_ (or whatever framework. you are using) and check out the styles in any FRAMEWORK NAME class that applies to your element…and those up the tree which contain it…

It ALSO matters what ELEMENT the text IS… for you to find its…style.

So to get rid of it, you have to explicitly DECLARE THEM TO BE ZERO.  
This used to be done a lot by using something called a RESET CSS style sheet, with specific ones for Specific Browsers as they all _styled_ things SLIGHTLY individually to themselves.

Luckily , you have used Pinegrow and it shows the element is a H1 at the bottom .

so you need to RESET the H1 margin and/or padding styles to zero.

You need to add margin:0;:

```auto
h1 {
    margin:0;
    background-color: lime;
}

```

but also remember that if this H1 element is INSIDE another element then THAT containing element may have PADDING (which is on the inside) that again moves this element further towards the centre of that containing element.

Actually, here is a link to this sort of thing too.

> <https://stackoverflow.com/questions/26919641/unwanted-top-margin-for-h1-element>

---

<div class="post-metadata">

### Author: ![schpengle](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/schpengle/32/238_2.png) [@schpengle](https://forum.pinegrow.com/u/schpengle)
#### Post date: [March 9, 2019, 1:59pm UTC](https://forum.pinegrow.com/t/solved-getting-rid-of-text-margin/2829/3 "2019-03-09T13:59:49Z")

</div>

Also, if you are talking about the SPACE between the top and bottom of the letters and the BLUE box, which Pinegrow is outlining to show you the Text’s LINE HEIGHT…then …yep!

You need to adjust that property.

ie

line-height: 65%;

would fit that **TEXT** headline very snugly.

![2019-03-09_14-11-54](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/a/a0c7b0a1bc2a2fecdc76e010cad65705b29156d2.png)

So drawing those two borders around the text and its container so you can see, use this code.  
Then Play with it. 🙂

```auto
<!DOCTYPE html>
<html lang="en">
    <head>
       
        <title>New page</title>
        <link href="css/style.css" rel="stylesheet">
    </head>
    <body>
        <div class= "header">
            <h1 class="sitename">TEXT</h1>
        </div>
    </body>
</html>

```

and the styling would be

```auto
.header {
    border: 1px solid green;
    height: 100px;
    padding: 0px;
    margin: 0px;
}

.sitename {
    margin: 0px;
    padding: 0px;
    line-height: 65%;
    border: 1px solid blue;

```

you can also use **wildcards** l  
such as

**.** \* (dot asterisk) to target EVERY element on the page for paddings and margins,

remember that the BODY element ALSO has defaults, so you can set those,

And finally, you may want to check to _reset.css_ sort of things on the internet.

I can highly recommend the CSS course by Scott Allen which is free this weekend on [Pluralsight.com](http://Pluralsight.com) for showing some of this stuff.

---

<div class="post-metadata">

### Author: ![jtkay](https://avatars.discourse-cdn.com/v4/letter/j/9f8e36/32.png) [@jtkay](https://forum.pinegrow.com/u/jtkay)
#### Post date: [March 11, 2019, 5:21am UTC](https://forum.pinegrow.com/t/solved-getting-rid-of-text-margin/2829/4 "2019-03-11T05:21:54Z")

</div>

Thanks for the detailed replies! Didn’t realize I needed to add the 0 value for margin. That did it. Luckily, I was aware of line height as I have come across that in Oxygen.

---

<div class="post-metadata">

### Author: ![Thomas](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/thomas/32/61_2.png) [@Thomas](https://forum.pinegrow.com/u/Thomas)
#### Post date: [March 11, 2019, 10:05am UTC](https://forum.pinegrow.com/t/solved-getting-rid-of-text-margin/2829/5 "2019-03-11T10:05:04Z")

</div>

That’s what I call a typical use case for “Normalize” or “Reset” of user-agent styles. I’m used to use the Reset of Eric Meyer [https://meyerweb.com/eric/tools/css/reset/](https://meyerweb.com/eric/tools/css/reset/) - up to your personal taste though.

Cheers

Thomas

---

<div class="post-metadata">

### Author: ![jtkay](https://avatars.discourse-cdn.com/v4/letter/j/9f8e36/32.png) [@jtkay](https://forum.pinegrow.com/u/jtkay)
#### Post date: [March 11, 2019, 1:26pm UTC](https://forum.pinegrow.com/t/solved-getting-rid-of-text-margin/2829/6 "2019-03-11T13:26:05Z")

</div>

Thanks Thomas! I have seen the phrase, CSS Reset, a few times but did not know what it was. Adding that to my checklist as I begin each website.
