-
201130 Nov
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.
You can skip to the end and leave a response.
-
Comments
-
01.
Collapsed margins.
~a perfectly ordinary web developer, and certainly not secretly a member of the CSS Working Group attempting to sway this poll by astroturfing
-
02.
Collapsed margins.
However, if it’s well documented, both case are acceptable (but IMO, collapsed margin make definitely more sens to me)
-
03.
1em, the margins should collapse.
Column-spanning elements should behave as block-level elements rather than stacked floating elements, plus collapsible margins are very useful.
-
04.
This feels like a kind of float. I would do whatever normal floats do (which is collapse, I think)
-
05.
Most definitely collapsed margins. Although I agree with Jeremie about documentation.
-
06.
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.
So all in all, the most common use case should be shortest to write.
-
07.
KenBW2 says:Comment » November 30th, 2011 at 1:05 am
Collapsed
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
-
08.
In an ideal world there’s be an attribute for enabling / disabling margin collapse as needed.
#content p { margin-collapse: collapse; }
#sidebar ul { margin-collapse: hell-no; }
-
09.
I would expect the margins to collapse. In an ideal world, however, I would have to side with thinsoldier (ability to disable collapsing margins with CSS).
-
10.
Collapse – as it is something people are already familiar with.
I’d like a related question resolved, though. Why can we only span none or all columns – why not a specified number? eg:
h2 { column-span: 3;}
-
11.
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.
-
12.
Collapse.
If you wanted to create a property like border-collapse like margin-collapse: true | false that would be fine, but to go against what the expected behavior would be wouldn’t make sense to me.
-
13.
Collapse.
I don’t understand why it would be any other way…
Also, John, I’m confused. Collapsed margins make it easier for me to get uniform spacing. I can apply margin: 1em; and there’s a distance of one em around and between all elements.
A padding of 1em (or un-collapsed margins) would appear to add a space of 1em above the top and below the bottom elements, but 2em between all the others. That seems uneven to me…
-
14.
-
15.
Like Francisc I would opt for collapsed margins,as well as an attribute for enabling / disabling margin collapse as needed.(Tinsoldier)
-
16.
I would like to understand why the behaviour should change between normal block-level elements and stacked floating elements. Multiple behaviours are harder to expect unless you understand why.
Would the explanation be far-fetched I’d consider a margin-collapse switch.
-
17.
Nadia L. says:Comment » November 30th, 2011 at 10:59 am
If they are like floats, than their margins need to not collapse. Because floats establish a new block formatting context.
Question is: should they be seen as floated?
-
18.
Tim says:Comment » November 30th, 2011 at 11:02 am
Separate margins even if your pictures is nicer with collapse margin.
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. -
19.
Collapsed margins.
I’ve not asked these elements to be floated, and they’re there as part of the spec as spanning block-level elements, so their margins should collapse.
-
20.
Should floated blocks margins collapse? I believe they should, but we already have a standard by now :P
-
21.
-
22.
No collapse. It remains clear what margin: 1em 0; means – margin: 0 0 1em 0; should be equally clear. Use a or a to start a new context.
-
23.
Try again:
No collapse, it remains clear what margin: 1em 0; means – margin: 0 0 1em 0; should be equally clear. Use a div or a section to start a new context. -
24.
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. -
25.
Collapse, but as thinsoldier said “In an ideal world there’s be an attribute for enabling / disabling margin collapse as needed.”
-
26.
#content p { margin-collapse: collapse; }
#sidebar ul { margin-collapse: hell-no; }
This sounds great =)
-
27.
Collapse
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.
-
28.
Collapsed, then margins will be consistent top and bottom
-
29.
Luckypouet says:Comment » December 1st, 2011 at 11:49 am
Definitly collapsed.
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 ;)
-
30.
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.
-
31.
Darko Panić says:Comment » December 2nd, 2011 at 5:19 pm
Do’t care just don’t deflect from existing recommendations. If column spanning element floats then no collapsing. If you want collapsing don’t make it float.
-
32.
-
33.
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. -
34.
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. -
35.
-
36.
Prefer to stay with the expected behavior. So, if it floats, don’t collapse the margins. Otherwise, do collapse the margins.
Agree with some others that, regardless of the outcome, it would be nice to have a switch.
-
37.
I see this as a lose-lose situation.
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?
-
38.
The collapsed margins provide a cleaner look and don’t jar the flow of the page with unnecessary white space. This should be the default only if we can come up with a good behavior for it.
-
39.
-
40.
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… -
41.
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.
-
42.
How about another style – hard-margin, that would go outside the border and inside the margin, and would not collapse.
-
43.
I would opt for not collapsing. It is not intuitive to me to have two elements on top of each other and have one of the margins not affect anything.
-
44.
definitely collapse
most of the time this will be what’s needed and for the few exceptions one can always use an extra css style
-
45.
They should work the way they work everywhere else. Changing the way things work in specific cases is non-intuitive, and should be left as an exercise for the user.
-
46.
-
47.
Collapsed. But line-height for columns needs fixing too: http://www.betleywhitehorne.com/ric-lep/fix-css-line-height/example2.html
-
48.
-
49.
-
50.
-
01.
