[Solved] Getting rid of Text Margin?

Beginners
1

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

Text%20Margin
Text Margin.PNG704Ă—419 6.98 KB

2

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 :slight_smile:

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;:

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.

3

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

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

<!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

.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 for showing some of this stuff.

1 Like
4

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.

5

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/ - up to your personal taste though.

Cheers

Thomas

1 Like
6

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.