Comments on: CSS Margin Collapse

By: Kalligeo

Kalligeo — Sun, 17 Aug 2008 15:20:59 +0000

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

By: Eric Wendelin

Eric Wendelin — Fri, 22 Feb 2008 05:45:33 +0000

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!

By: Dave

Dave — Thu, 21 Feb 2008 10:22:51 +0000

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.

By: Craig

Craig — Thu, 21 Feb 2008 09:33:45 +0000

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.

By: Dave

Dave — Wed, 20 Feb 2008 19:42:38 +0000

Hi Art, Thanks for letting me know, I’ve corrected those spellings now. Cheers.

By: Art

Art — Wed, 20 Feb 2008 18:08:16 +0000

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”.

By: Dave

Dave — Wed, 20 Feb 2008 16:55:01 +0000

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.

By: chris

chris — Wed, 20 Feb 2008 16:36:09 +0000

does this work for horizontal margin as well? Guess I’ll have to do some testing. Thanks for the great article!