• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

Night Drive > Collapsing Margins

Collapsing Margins

A somewhat obscure quirk of the CSS box model is something called collapsing margins. This means that if two elements rest one on top of the other and they both have non-zero margins and no padding, borders, or other conditions mentioned, the total combined height of both margins will be to less than their sum. So 20 pixel margins won’t add up to a 40 pixel gap between elements—instead each margin collapses into the other and you end up with a 20 pixel gap.

But what does this have to do with the gap problem? Collapsing affects parent and child elements equally; because the divs have no vertical margins, each div’s bottom margin collapses into its last child paragraph’s bottom margin. But because the total margin value is not zero, the paragraph’s 10px margin still has to be honored. It pokes through the bottom of the containing div (FIGURE 5).


PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


  
  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint