Setting all CSS heights to 0px leaves rendered height > 0
The following example defines two styles:
undisplayed which simply sets
noheight which sets all height properties in the Box Model to 0px. It also sets
overflow according to the advice in Div height:0px does not work?.
There is a paragraph in each of these styles, with a horizontal line above and below it.
noheight ≠ undisplayed
I have tested this on Firefox 23.0.1 and Safari 6.0.5. In both cases, the gap between the two horizontal lines surrounding the
noheight paragraph is bigger than that around the
undisplayed paragraph. Why?
I'm interested in finding out why for two reasons:
I hate a mystery.
I've been playing with CSS animations to make some content contract in height to nothing. With an animation that changes the height properties mentioned in the
noheightclass, I'm always left with extra vertical space. I know I can do this with jQuery, and that my efforts to do so with CSS animation will probably not look as slick, but I am experimenting in order to improve my understanding.
I expect that my list of properties for the
noheight style is an overkill, with some redundancy. If so, what is redundant (i.e. can be safely omitted on, say, recent(ish) versions of Chrome, IE, Firefox and Safari)?
See Margin collapsing
.undisplayed element has
display set to
none he is removed from the visual tree, therefore margins from the two surrounding
hrs are collapsed.
.noheight element however, that is not the case, the element is still present and rendered (as 0px high) so margins can't collapse.
This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here