Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Setting all CSS heights to 0px leaves rendered height > 0

Setting all CSS heights to 0px leaves rendered height > 0

Problem

The following example defines two styles: undisplayed which simply sets display:none, and noheight which sets all height properties in the Box Model to 0px. It also sets line-height and 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

undisplayed:


text


noheight:


text


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:

  1. I hate a mystery.

  2. 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 noheight class, 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)?

Problem courtesy of: Matt Wallis

Solution

See Margin collapsing

As .undisplayed element has display set to none he is removed from the visual tree, therefore margins from the two surrounding hrs are collapsed.

For a .noheight element however, that is not the case, the element is still present and rendered (as 0px high) so margins can't collapse.

Solution courtesy of: Jakub Michálek

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Setting all CSS heights to 0px leaves rendered height > 0

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×