Is there a way to remove the space on top of web page?

Question

I cannot seem to figure out how to get the space between each element to disappear. I mainly want to remove the white space on top. I have tried using margin-top:0 and it didn't work. Any advice would be greatly appreciated.

This is my html

<body>
    <div style="background-color:green;">
        <h1>top</h1>
    </div>
    <div style="background-color:blue;">
        <h1>body</h1>
    </div>
    <div style="background-color:red;">
        <h1>footer</h1>
    </div>
</body>

This is my css

body, div, header {
    padding:0;
    margin:0;
    margin-top:0px;
}

that approach is correct, but you are hiding "header" instead of h1 also try a cssreset.com — roo2
– roo2, Commented Feb 26, 2014 at 3:57

Timmah · Accepted Answer · 2014-02-26 04:02:16Z

2

The space is caused by the User Agent Stylesheet (the default styles applied by your browser).

You need to target the H1 also.

html, body, div, h1 {
   margin:0;
}

Alternately, rather than individually targetting each element, you can use the universal CSS selector * to target everything at the start:

 * {
     margin:0;
     padding:0;
    }

To avoid trouble, you should start your CSS with a CSS reset. This sets all padding, margins etc on all elements to ensure browsers interpret your styles from the same starting point rather than relying on each browser's individual user agent stylesheet.

If you want to go modern, you can use Normalise.css

answered Feb 26, 2014 at 4:02

Timmah

1,3352 gold badges10 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

jalapenolime Over a year ago

Thank you for the help! I will definitely check out your links

JunM · Accepted Answer · 2014-02-26 03:57:38Z

2

Include h1 on your CSS:

Fiddle

body, div, header, h1 {
    padding:0;
    margin:0;
    margin-top:0px;
}

answered Feb 26, 2014 at 3:57

JunM

7,1608 gold badges40 silver badges60 bronze badges

Collectives™ on Stack Overflow

Is there a way to remove the space on top of web page?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related