Re: [css-box] margin-collapse property

On Wed, Jul 30, 2014 at 3:15 AM, Jon Rimmer <jon.rimmer@gmail.com> wrote:
> 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.

Agree that margin collapsing should be controllable.  Having to use
1px transparent borders to prevent a child's margin from collapsing
with its parent is horrible, and controlling the collapse of an
element with its sibling is impossible.

We have a long-standing wiki entry detailing plans for this:
<http://wiki.csswg.org/ideas/margin-collapsing>.  It'll show up when
we define Block Layout properly, I expect.

~TJ

Received on Saturday, 23 August 2014 01:10:24 UTC