Forum Moderators: not2easy
There are two divs, one on top of another. The second div has an h1 inside with a top margin of 50px (the same happens for any block-level element with a top margin that is the first child). For some reason, instead of just the h1 moving down 50px, both the bottom div and the h1 move down 50px.
I've tested it in Firefox 2.0.11, IE6, Opera 9.23, and Safari 3 beta (all for Windows), and it happens in all but IE.
Anyway, it's a pretty easy problem to fix — just add a small amount of padding or a border to the bottom div — but it's still perplexing, and I want to know why it happens.
Any ideas?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Odd margin behavior</title>
<style type="text/css">
.top {
height:80px;
width:100%;
background-color:red;
}
.bottom {
height:400px;
width:100%;
background-color:blue;
}
h1 {
margin-top:50px;
background-color:yellow;
}
.there-should-not-be-a-gap-here {
position:absolute;
top:90px;
color:blue;
font-size:200%;
}
</style>
</head>
<body>
<div class="top">Top div</div>
<div class="bottom">
<h1>This h1 has a 50px margin that pushes the bottom div down instead of itself</h1>
Bottom div
</div>
<div class="there-should-not-be-a-gap-here">There should not be a gap here!</div>
</body>
</html>
The relevant portion would be this I think.
The top margin of an in-flow block-level element is adjoining to its first in-flow block-level child's top margin if the element has no top border, no top padding, and the child has no clearance.
I tried adding a 1px padding-top to your .bottom style and this gives you the result I think you were expecting (testing done on Camino 1.5.4 on a Mac).
all browsers are correct except IE in this case it is incorrectly carrying up the background of the bottom div :o, however, if you take hasLayout off the bottom div (i.e. remove the width and height) - it displays the same as the other browsers - This is a Layout error by IE!
There should be a gap - the margin of the H1 is combining and collapsing with the parent div as per recommended behaviour. The solution of 1px top/bottom padding or border on the div is the most common one if the effect is to create visually joining boxes (this stops the h1 margin and the parent div margin adjoining!) or you could zero the margin on the H1 and use padding on it instead.
