I have often wondered why Firefox renders CSS this way. If anyone can shed some light on this, I would appreciate it. Here's my code: <hr style="width: 300px; height: 1px; background: black; border: 0px; color: black" align="left" /> <div style="width: 300px; background: blue; margin: 0px; padding: 0px"> <div style="margin: 12px">Hello</div> </div> The HR tag is there to show that the top margin is indeed being applied. It isn't collapsing. According to the CSS spec (http://www.w3.org/TR/CSS21/colors.html), the background of a margin is always transparent, and the parent background should shine through if I'm reading this right. But FireFox seems to default the top and bottom margin background to the BODY background and not the background of its container. Even more odd (in my mind), is that it does apply the blue background to the interior left and right margins. It just doesn't apply them to the interior top and bottom margins. Those margins show as white in the above example. Now, if I add a top/bottom border or any kind of padding to the container DIV, the interior DIV's margin blue color shows up just fine. In many instances I've had to add a 1px top border or 1px of top padding to fix this sort of behavior. I don't have to add any content to the container, just a border or some padding. In IE7, the margin color shows up the same for the top and bottom interior margins as the left and right interior margins. Why is this?
The margin overlaps to the outside container instead of staying inside the container... Margins always overlap in the standards regardless of the 'presentation' when no 'hard boundaries' (my term for it) are set on the container. For the behavior you are expecting, you have to set 'hard boundaries' around your outer DIV - meaning either border, set it to overflow:auto / overflow:hidden, or make it float. Any of those tell the container not to allow elements inside it to let their margins go outside the container. By the specification, again it's IE that's getting it wrong - while FF, Safari and Opera are all doing it correctly. <hr style="width: 300px; height: 1px; background: black; border: 0px; color: black;" align="left" /> <div style="width: 300px; background: blue; margin: 0px; padding: 0px; overflow:hidden;"> <div style="margin: 12px;">Hello</div> </div> For example fixes you right up.