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;}
inner
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;}
inner
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;}
inner
A clean version of the html file is here.
Helpfull hint. I have experienced this many times during deveopment but never truly knew the reason why I needed to implement a work-around. Thanks.
me too. Thanx:)
you’re welcome, guys, I am glad it helps!
That helped me a lot. But I’m still confused why does FF add this extra space.
Cheers mate really helpful
thank you — i was working on a wordpress site that was driving me crazy with this anomaly in firefox!
Outstanding, thank you so much for this.
Excellent!