We’ve got a bit of a tricky question on expected behavior of multi-column layout for you folks.
First, I want you to imagine a multi-column element. Like this one:

Now suppose that you want to use a column-spanning element. Column-spanning elements stretch across the entire multi-column element. Content before one balances into a short row of columns before it, and content after it continues in another row of columns after it. Like this:

Next, suppose you place two spanning elements, one after the other, like this:

Finally, suppose you gave each spanner a 1em vertical margin on both sides (margin: 1em 0). Remember that vertical margins between normal block-level elements collapse (so there would be only 1em gap between the two) whereas margins between stacked floating elements do not collapse (so there would be a 2em gap between the two).

In your ideal world, is there a 1em or 2em gap between the two elements?

Separate Margins (2em Gap)

Collapsed Margins (1em Gap)

Post your thoughts in the comment section, and we’ll forward them to the CSS Working Group.

I think most commonly people will want to have the same vertical distance between elements for visual harmony, so defaulting to collapsed margins is probably best. If they want to double the space, they can write a bit more CSS for this.

Although I can’t say I approve of collapsing margins (especially where I use a margin-top on an element which is contained in a margin-less, padding-less, border-less box), it would be inconsistent to think otherwise

No collapse, collapsed margins are anti-intuitive and should be COMPLETELY removed from browsers and CSS. If people want collapsed margins then they should opt in to an option that explicitly declares it, I hate having to use padding to get uniform margins.

Because if you are a front end developer and you want this gap out you manipulate one element, say first.
Then you delete margin and you see it does nothing to the gap which is annoying.

And because I don’t like to write a CSS rules which is not used.
User should have the choice to adjust both margins.
I don’t like the attributes collapse to enable/disable, make it more confusing to debug.

I would expect the gap to be 2 em wide, as this is how CSS normally behave and what I would assume it to do.
I don’t want the browser to magically fix these issues without my acceptance. So an option to turn this behavior on would be fine, however I don’t want it on as default.

Even though I agree with John A. Bilicki III that collapsed margins are overall anti-intuitive, it is a fact that browsers do handle things this way, so it’s better to keep consistent. Collapsing is the behavior I did expect before I got the the end of the article.

The question of a way to enable / disable margin collaping is a good one. But I think that it should be a global setting affecting all the document. If it’s an individual setting, it would makes the structure much more complicated. That’s my thought ;)

Andrew, I can’t remember offhand though I think if I use p {margin: 4px;} (or was it different values? Can’t remember offhand right now) that the margins don’t actually end up doing what I want…I KNOW that I’d have 8px of margins between two paragraphs in a normal situation, add collapsed margins and it DOESN’T do what I tell it to do in a NORMAL sense. Standards don’t ALWAYS make sense. A “shortcut” method should be EXPLICIT, not inherent because in this situation I say apple and the browser gives me an orange instead.

Georgi Popov, the sad thing is that Mozilla has decided to remove the isSameNode method which was in DOM3 simply because it doesn’t show up in the ECMA 5.1 specification. That makes no sense, DOM3 has not only been a stable spec for years but it’s been LIVE and very well implemented. People should ADD to a spec and not actively remove things unless there is a serious issue.

Separate margin
Though we have got used to collapse margin,i still think separate margin is nature.It like that two countries have “1em territories”,and it’s strange if collapse. I remember I first core in css with confusion about it,and adjust myself for its collapse logic.
After all,we can do the same interface if
separate margin accepted.

Collapsed margins. I won’t change the way I’m teachin xhtml/css. Block-level elements must collapse margins as does.
BTW, this span-colum attribute seems to be a perfect answer to some issues exactly as IDCS5′s span column attribute is doing the same job on paragraphs.

Because the current margin collapse behaviour is already inconsistent, no matter which one we pick there will always be headaches in one case or another.

Even if we introduce new margin-collapse property, does it solve all of the problems? Do we need margin-collapse-vertical, margin-collapse-horizontal, margin-collapse-parent, margin-collapse-sibling, margin-collapse-block & margin-collapse-line? And how about the combinations like margin-collapse-vertical-line-sibling?

no-collapse
While the current collapsible margins work and I’ve gotten used to them, all the people I teach webdesign are always frustrated by it at first. I myself wouldn’t mind writing (margin:.5em 0;) to create evenly spaced elements, I also understand that this doesn’t make the spacing above the first element and below the last the same as in-between, but most people I’ve made sites for prefer it that way, which I’ve had to do by other means… I like the margin-collapse property idea, but my vote would be for “none” to be default…

Collapsed margins please… with (as suggested above) a way to switch them off when not wanted… and the rule being that if any edge of a collapsed margin element is touched by an element with collapsed margins switched OFF then that particular touching margin should not be collapsed.

I have a left float div where I have 2 sibling stacked divs with 10px margin, and a right float div where I have 2 sibling stacked divs with no margin but both contain a div with 10px margin. This forces my right float 10px deeper and they do not line up. You may ask why I would have this and I could go on to explain about the configurable system with reusable panels I am building but I won’t. STOP COLLAPSING! I now have to bloat my css! grrr

The debate is about two ways of thinking about what you are defining when you set the margin. Are you adding a THING before and after or are you spec’ing what it should LOOK like? I suspect if you have a coding background, you will think the THING is intuitive and if you have a graphic design background, you will favor the LOOK.

In terms of visual grammar, a margin defines the context, the minimum you need within this visual vocabulary to define a difference of a specific type. Too little space and the elements will seem connected. Too much space and the viewer will wonder if a different level of difference is implied.

Don Knuth, author of the classic “The Art of Computer Programming”, when he was developing his typesetting system TeX, worked with some of the top type designers in the world to understand what made beautiful typography. A huge part of such beauty is how comfortably it conveys the associations of meaning with subtleties of spacing. Knuth wrote complex algorithms to get TeX to behave following the aesthetics of the designers. He automatically collapsed such vertical margin spaces.

It’s all about communicating with the reader/viewer. If you don’t collapse the spaces, then in your visual grammar you are introducing the idea that there should be a something in between those two things, when there is nothing.

If you need the space for alignment between visual modules, perhaps you need a different way of thinking about how you are separating your elements. Perhaps if they are in separate DIVs the space should not collapse.

As for intuitions, HTML already collapses horizontal space. If your source text has line breaks and indented text, MS Word will faithfully reproduce your keystrokes as individual THINGS and you have to carefully proofread for extra space characters. HTML will faithfully collapse all white space between printing characters into a single space, a delimiter between text elements. If you want to force a double-space, you have to include an NBSP or something else to invisibly say there is more going on than simply delimiting words. Why should vertical space be any different?

IMO, Margins should always collapse wherever they are (including floats). We don’t need an extra property to say they shouldn’t collapse either, because we already can define a transparent border, a terminology which conveys the effect of non-collapsible spacing better than “margin”. Of course margins are already non-collapsible for floats and horizontal margins, which means it’s already broken.

I agree with a number of people on here that the margins should collapse (and indeed that floated element margins should also collapse, but that’s a whole other story). If two people have restraining orders against each other that stop them from going within 100 metres of each other then the minimum distance they can be from each other is 100 metres, not 200 metres – I don’t see why elements should be any different :)