Collapsing Margins

11 January 2012

Part of the CSS Box Model is the concept of collapsing margins. Where the box model concept might be a bit hard to grasp, collapsing margins are even more difficult. The W3C specs define collapsing margins like this:

In CSS, the adjoining margins of two or more boxes (which might or might not be siblings) can combine to form a single margin. Margins that combine this way are said to collapse, and the resulting combined margin is called a collapsed margin.

This means that when vertical margins (as of CSS 2.1 only vertical margins collapse) touch eachother the smalles value will expire. If a few paragraph elements with 20 pixels top and bottom margin are stacked - which happens quite a lot - the space between these paragraphs isn't 40 pixels, as you would expect, but 20 pixels instead.

There are other situations where elements do not have their margins collapsed:
  • floated elements
  • absolutely positioned elements
  • inline-block elements
  • elements with overflow set to anything other than visible (They do not collapse margins with their children.)
  • cleared elements (They do not collapse their top margins with their parent block‚Äôs bottom margin.)
  • the root element

Indepth article



Go to www.seifi.org for a clear article on collapsing margins. This article has a few great graphics



References



I used these websites as sources for this article:
http://www.seifi.org/css/understanding-taming-collapsing-margins-in-css.html
http://www.w3.org/TR/CSS21/box.html#collapsing-margins
http://reference.sitepoint.com/css/collapsingmargins
You must have JavaScript enabled to use this form!

Leave a comment!

  1. Your mail is safe with me. It's only only used to display your Gravatar image!

0 comments

Please feel free to be the first to comment on this page!

By placing a comment you let me know i'm doing a good job. It doesn't have to be constructive, just a "awesome!" makes me really happy! You contribute to a better world!