HTML5 body spacing issue

Question

I cannot seem to remove the spacing between the top of the page and the <div> in this example:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Index</title>
    <style type="text/css">
        html, body{
            padding: 0;
            margin: 0;
        }
        #container{
            background-color: #808080;
        }
    </style>
</head>
<body>
    <div id="container">
        <div id="inner-container">
            <h3>Index</h3>
        </div>
    </div>
</body>
</html>

I have narrowed it down to this line:

<!DOCTYPE html>

It seems removing this aligns the <div> to the top of the page. I can't see a way in CSS to achieve the same thing.

probably this would help: [Why does the HTML5 DOCTYPE mess with my padding?](http://stackoverflow.com/questions/3003051/why-does-the-html5-doctype-mess-with-my-padding) — SajjadHashmi, Dec 04 '12 at 11:51

score 4 · Accepted Answer · answered Dec 04 '12 at 11:51

4

remove the margin from your <h3> as well

h3 { margin-top: 0 }

DEMO

answered Dec 04 '12 at 11:51

Zoltan Toth

46,981
12
120
134

Argh! I've been looking at the html/body elements in Chrome tools, I didn't think the margin on the h3 would cause this... d'oh! – Phil Dec 04 '12 at 11:54
You are a genius / lifesaver – darkbluesun Mar 18 '15 at 02:44

score 0 · Answer 2 · answered Dec 04 '12 at 11:52

Margins collapse into each other.

The top margin of html (0), body (0), #container (0), and h3 (not 0) merge into a combined non-zero top margin between the first content and the edge of the window.

Set h3 { margin-top: 0 } to remove it.

(Although you should start your document with a heading (h1) not a sub-sub-heading (h3).)

score 0 · Answer 3 · answered Dec 04 '12 at 11:57

0

Actually Default Margin Of H1 to H6 is the problem you are facing so overriding this value will solve your problem.

h3 { margin-top: 0;margin-bottom: 0; }

answered Dec 04 '12 at 11:57

Zaheer Ahmed

28,160
11
74
110

score 0 · Answer 4 · answered Dec 04 '12 at 18:29

0

Extra Info:

You also might want to look into using a CSS reset script before starting a project so you don't have to worry about little things like this.

answered Dec 04 '12 at 18:29

Albert Fajardo

149
8

I am using HTML5 Boilerplate which uses Normalise.css already, I excluded it in the samples to help narrow down my problem. – Phil Dec 05 '12 at 10:11

HTML5 body spacing issue

4 Answers4