Dave Woods - Freelance Web Design Warwickshire

CSS Margin Collapse

Margin and padding are extremely important when it comes to CSS designs but margins collapsing between elements positioned vertically to each other can often cause some confusion.

However, within this tutorial, I’ll quickly explain how it works and how to use collapsing margins effectively.

Please note: this applies to all browsers and is not a quirk of any particular browser so it’s definitely something worthwhile understanding correctly.

I’ve decided to cover this topic as it created quite a bit of discussion (unintentionally) within the comments of the CSS Reset topic and seemed to cause a little bit of confusion not only with how it’s used but also what exactly it is.

The easiest way to explain how it works is to show a demonstration of it in action so take the following bit of CSS which is simply applied to an h1 which is then followed by a paragraph.

* {
margin: 0; padding: 0;
}
body {
padding: 10px;
font: 100%/1.5 "lucida sans", verdana, arial, helvetica, sans-serif;
}
h1 {
font-size: 1.4em;
padding-bottom: 10px;
background-color: #9CC;
}
p {
padding-top: 10px;
background-color: #CC9;
font-size: 0.8em;
}

This would output something like this:

I’ve used the background colour purely to demonstrate where the gap is being applied. As expected, a gap of 10px appears below the heading and a 10px gap appears above the paragraph.

However, for anyone that doesn’t understand margin collapsing, the next bit of code may surprise you.

* {
margin: 0; padding: 0;
}
body {
padding: 10px;
font: 100%/1.5 "lucida sans", verdana, arial, helvetica, sans-serif;
}
h1 {
font-size: 1.4em;
margin-bottom: 10px;
background-color: #9CC;
}
p {
margin-top: 10px;
background-color: #CC9;
font-size: 0.8em;
}

In this bit of code, the only thing that we’ve swapped is the paddings for the margins. A lot of people may expect the padding to disappear and for a 20px gap to appear between the heading and the paragraph but what you’ll actually see is this:

Instead of a 10px gap underneath the heading and a 10px gap above the paragraph to give us a 20px gap, what we’re actually given is a 10px gap.

This is because any adjacent margins will collapse and only display a margin equivalent to the largest margin. For example, if you were to increase one of the margins to 40px and the other to 30px then all you will be given is a margin of 40px.

However for padding, the opposite is true and all paddings will be added together to give you a total padding.

Summary

This can provide extremely useful for maintaining consistency between elements even if various margin values have been applied. If margin collapse isn’t understood correctly then it can be a little frustrating as it can appear that margin values are being ignored, but with a little understanding it can be an extremely valuable and underestimated tool.

8 comments on “CSS Margin Collapse

  1. Dave Post author

    Hi Chris, This only applies to vertical margins so is best used for things like spacing between headings, paragraphs, list items etc

    Horizontal margins aren’t affected by the margin collapse so you’ll find that the total margin is calculated by adding any touching margins together for things like columns.

    Hope that makes sense.

  2. Art

    To make something plural, you add an ‘s’ to the end of the word without an apostrophe. When talking about more than one margin, it should be “margins” not “margin’s”.

  3. Craig

    There are some cases where even vertical margin collapsing does not work as expected.

    For example the margin on a table.

    Its these exceptions which can cause some difficulties when making the design consistent.

  4. Dave Post author

    Hi Craig, I agree that within table cells and rows you do have a slightly different issue but this can usually be controlled using border-collapse and padding.

    Other than that though, margin collapse should always work, even on the actual table tag itself in relation to other elements before or after it.

  5. Eric Wendelin

    This is a nice simple example. Of course there are caveats with tables, but isn’t that the case in general when we talk about spacing and tables?

    Well done, Dave!

  6. Kalligeo

    hello, actually there a strange thing about horizontal collapsing

    working on ubuntu linux 8.04, firefox 3.0.1 and opera 9.51, i see that the following code works dramatically different:

    #left {
    margin: 7px 7px 0 0;
    padding: 7px;
    width: 108px;
    float: left;
    }
    #main {
    margin: 7px 0 7px 7px;
    overflow-y: auto;
    }

    this way you have 7 pixels between left and main in firefox, and 14 pixels in opera

    to have 7 pixels in both i need to set:

    #main {
    margin: 7px 0 7px 0px;
    overflow-y: auto;
    }

    could you help me?

    i’m not comfortable to access internet explorer (well i could use http://ipinfo.info/netrenderer/ but i’m lazy 🙂

    i wait for your reply….

    thank you

    KG