Menu
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>
700
The Architecture: The content is surrounded by the border, the space between the content and the border is called the padding, while the space between the border and the other elements in the document is called the margin.
It's just a margin collapse issue. A 1px padding on #headerbotm (or top border) will suffice.
To add extra space below a line or paragraph of text, or push text down lower on the page once, you can use the <br> tag.
Because your <p>Platform</p> element has a margin that pokes out of its parent <div id="airport"> element and offsets it from the <body>.
99
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
