Highub – IT Web Tips

Firefox renders CSS margin-top in such a way that if there are two elements, one inside another, and you set margin-top for the inner element, the outer element collapses the margin-top amount of height. So you may see extra ‘padding’ or ’spacing’ at top of the outer element.

CSS:
.outer {background-color:#FF9900; border:1px solid black; width:150px; height:150px; }
.middle{width:100px; height:100px; background-color:#666666; }
.inner {width:50px; height:50px; background-color:#99CC66; margin-top:20px;}

The solution is to add either a padding-top:

CSS:
.outer-b {background-color:#FF9900; border:1px solid black; width:150px; height:150px; }
.middle-b {width:100px; height:99px; background-color:#666666; padding-top:1px; }
.inner-b {width:50px; height:50px; background-color:#99CC66; margin-top:19px;}

or a border-top:

CSS:
.outer-c {background-color:#FF9900; border:1px solid black; width:150px; height:150px; }
.middle-c {width:100px; height:99px; background-color:#666666; border-top:1px solid #666666; }
.inner-c {width:50px; height:50px; background-color:#99CC66; margin-top:19px;}

A clean version of the html file is here.