[css-box] margin-collapse property

The box-sizing property has proven very popular as a way for
developers to control unintuitive default behaviour in CSS, to the
extent that many (most?) CSS frameworks such as Bootstrap include a
global box-sizing: border-box override by default.

I believe it would be useful to provide a similar switch to control
margin-collapse behaviour. The default behaviour is useful in some
contexts, but in others, particularly collapsing margins between
parents and children, it is often just a pain. To that end, I propose
a new property margin-collapse that controls whether an element is
eligible for margin-collapsing. Between eligible elements, margin
collapsing would proceed as per the rules defined in CSS 2.1.

The margin-collapse property would accept the following values:

inherit
  Inherit from parent. Mixing with any other value is invalid.

all
  Default value. Eligible for collapse with adjacent, parent and child
elements that are eligible for collapsing. Mixing with any other value
is invalid.

none
  Do not collapse with any other element. Mixing with any other value
is invalid.

adjacent
  Eligible for collapse with adjacent elements that are eligible for collapsing.

parent
  Eligible for collapse with parent elements that are eligible for collapsing.

children
  Eligible for collapse with first and last child elements that are
eligible for collapsing.

The final three values would be combinable, e.g.

.nestable {
  margin: 1em 0;
  margin-collapse: parent children;
}

There could also be separate properties margin-collapse-top and
margin-collapse-bottom for controlling the collapse behaviour of the
relevant margins.

The primary use case for this property would be for container elements
that do not want their children's margins to collapse with their own:

.container {
  background: #ebebeb;
  margin: 1em 0;
  margin-collapse: parent adjacent;
}

And for preventing margin collapsing on the body element:

body {
  margin-collapse: none;
}

In general sense, I think this property is rational, benevolent API
design. Any feature, such as margin collapsing, that does something
"clever" or non-obvious, even if it is to positive effect in many
situations, should provide a simple way to override and control it
explicitly. Developers should feel such features at working for them,
rather than being at their whim.

Jon

Received on Wednesday, 30 July 2014 10:16:08 UTC