Menu
I have a div with a <h1> tag in a div, with no margins. If I define any doctype, a white space appears above the div.
If I remove the <h1> tags, or remove the doctype definition, there is no space (as there should be. Why?
Example HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style>
body {
margin:0
}
#thediv {
background-color:green
}
</style>
</head>
<body>
<div id="thediv">
<h1>test</h1>
</div>
</body>
</html>
The problem is the space above the green div, remove the DOCTYPE and the space disappears, change the <h1> tag to <b> and the space also disappears. It happens with any doctype (XHTML/HTML, strict/transitional/etc)
Happens in almost all browsers (Using http://browsershots.org). Amusingly, the only browser that seems to display it correctly was Internet Explorer 6.0..
457
The space above the green div is the correct behaviour according to the CSS spec. This is because the top margin of the h1 adjoins the top margin of the div.
One way to keep the margin of the h1 inside the div is to add a border to the div:
#thediv{ background-color:green; border: 1px transparent solid; }
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
