CODEWITHSUNDEEP
htmlcss
jalapenolime
jalapenolime

Reputation: 217

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

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

Upvotes: 0

Views: 64

Answers (2)

Timmah
Timmah

Reputation: 1335

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

Upvotes: 2

JunM
JunM

Reputation: 7158

Include h1 on your CSS:

Fiddle

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

Upvotes: 2

Related Questions