Reputation: 143

Why is there a space between the <body> and the <html> element

Why is there a space between the top of the green box and the browser window (in Chrome and Firefox)?

There is an apparent space between the html and body element that I cannot seem to eliminate with the CSS below (and dozens of variations upon it.) there also seems to be some bonus padding on the overall document height, as if some aspect of padding or margin is not being reset to 0.

Helpful tip: http://reference.sitepoint.com/css/collapsingmargins

I solved this problem by using the following code:

div#aiport > *:first-child { margin-top: 0px }

while adding

overflow: hidden;

to the div#airport definition by itself solved the problem correctly. :-)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>bug</title>
        <link rel="icon" type="image/png" href="bookmarkIcon.png" />
        <style type="text/css">
            html {
                height: 100%;
                min-height: 100%;
                padding: 0px;
                margin: 0px;
            }
            body {
                margin: 0px;
                padding: 0px;
                margin-top: 0px;
                padding-top: 0px;
                width: 100%;
                height: 100%;
                font-size: 16px;
                background: #fff;
            }
            div#airport {
                position: relative;
                z-index: 1;
                top: 0px;
                padding: 0px;
                padding-top: 0px;
                margin: 0px;
                margin-top: 0px;
                margin-left: auto;
                margin-right: auto;
                width: 900px;
                min-width: 900px;
                max-width: 900px;
                background-color: #0f0;
            }
        </style>
    </head>
    <body lang="en">
        <div id="airport">
            <p>Platform</p>
        </div>
    </body>
</html>

Upvotes: 14

Answers (9)

sarthak gupta

Reputation: 1

As answered by lanzz: Its because of the <p>Platform</p> element which has a by default margin that pokes out of its parent <div id="airport"> element and offsets it from the <body>.

To overcome this, you may add margin auto in your styles, which will help preventing such behaviour.

#airport p {
  margin: auto
}

Upvotes: 0

alexandre_anicio

Reputation: 199

Setting a some padding on the parent div might also solve it.

    div#airport {
    ...
    padding: 1px;
}

Upvotes: 0

anon

Reputation: 9

There is a default margin in body

add this to css:

body{
    margin:0;
}

Upvotes: 0

Alex Kendrick

Reputation: 969

Because p tag inside #airport has top margin on it.

If you remove the browser default top margin on that p tag you will no longer get the space. For example:

<div id="airport">
    <p style="margin:0;">Platform</p>
</div>

See this jsFiddle

Upvotes: 3

SpYk3HH

Reputation: 22570

Becuase the P tag is the first Tag with text in the document, this is a common CSS problem. try adding body > div:first-child > p:first-child { margin-top: 0; } to your CSS and it will fix it.

Upvotes: 1

Hebert Reis Angenendt

Reputation: 27

I change your CSS:

body {
                margin: 0px;
                padding: 0px;
                width: 100%;
                height: 100%;
                font-size: 16px;
                background: #fff;
            }
            div#airport {
                position: relative;
                z-index: 1;
                top: 0px;
                padding: 0px;
                padding-top: 0px;
                margin: 0px;
                margin-top: 0px;
                margin-left: auto;
                margin-right: auto;
                width: 900px;
                min-width: 900px;
                max-width: 900px;
                background-color: #0f0;
            }

Look your code here http://jsfiddle.net/xfhyq/

Upvotes: 1