[css-box] Add option to disable collapsing margins.

[Wes1262]

I know css-box hasn't been touched for years, but collapsing margins keep haunting developers, even to this day :-P

In particular people don't like the fact that margins are collapsed also between child and parent elements, as you surely know. So people resorted to overflow:hidden, transparent borders, 1px padding and other weird hacks.

Not everything doable with boxes is doable with flexbox and grids, like http://jsfiddle.net/noLyhwcj/ so maybe it's worth doing this?

Thank you.

[fantasai]

You can disable margin-collapsing between a parent and its child (along with enforcing float containment) using display: flow-root, see https://www.w3.org/TR/css-display-3/#valdef-display-flow-root

(I agree more control over margin-collapsing would be nice, though.)

[Loirooriol]

Chromium has these properties:

-webkit-margin-top-collapse
-webkit-margin-bottom-collapse
-webkit-margin-before-collapse
-webkit-margin-after-collapse

The values are collapse (the initial behavior), separate (avoid margin collapse) and discard (no margin).

[SebastianZ]

To make progress on this, regarding the -webkit- prefixed ones, I suggest the following properties:

margin-collapse: [ collapse | separate ]{1,2}
margin-collapse-start / margin-collapse-end: collapse | separate

Where the first value of margin-collapse sets the start value and the second one the end value. If just one is set, it applies to both.

Questions:

1. Should there be a discard value? I don't see a use case for it, as you can always set the margin of the element to 0, also in logical direction.

2. Are the physical variants margin-collapse-top and margin-collapse-bottom needed? As far as I can see, margin collapsing only happens in block direction. (Actually, CSS 2.2 says that vertical margins collapse and horizontal ones don't, though it should probably be changed in regard of writing modes. This should be clarified in [CSS2] changing language around vertical margin collapsing from physical to logical/block #2759.)

3. Is there a use case for collapsing margins in inline direction? Currently they are defined to never collapse, see above.

4. Is there a use case for collapsing margins in layouts other than block layout? Currently collapsing only happens in block containers as defined in CSS Box Model 3.

Sebastian