Re: [css-box] margin-collapse property

On 30/07/2014 8:15 PM, Jon Rimmer 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; }

Ok, why have you got vertical margin in this declaration as a shorthand 
when vertical margin do not collapse?

Secondly, where should my <p> be position in the following test?

<style type="text/css">
   .wrapper { background: yellow; }
   .float {
     float: left;
     width: 100px;
     height: 100px;
     background: blue;
     margin-bottom: 20px;
   }
   p { border: 5px solid red; }
   p.test1 { margin-collapse: all; }
   p.test2 { margin-collapse: none; }
   .box, .wrapper { clear: left; }
</style>

<p>A paragraph</p>
<div class="float"></div>
<p class="test1">Where should I be positioned with 'margin-collapse: 
all'?</p>

<div class="wrapper">
   <div class="float"></div>
   <p class="test2">Where should I be positioned with 'margin-collapse: 
none'?</p>
</div>



Also what happens in this situation?

<style type="text/css">
   .wrapper { background: yellow; margin-collapse: none; }
   p { border: 5px solid red; }
   p.test1 { margin-collapse: all; }
</style>


<div class="wrapper">
   <p class="test2">Which margin-collapse win?</p>
</div>



> 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:

That is a used case for a property and value for a 'Block Formatting 
Context'.


> .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

Alan

Received on Wednesday, 30 July 2014 12:14:33 UTC