Re: [css-box] margin-collapse property

On 2014-07-30 13:14, Alan Gresley wrote:
> 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?
I don't follow. Vertical margins do collapse[1], and in this example the 
elements margin-collapse is configured to be eligible for collapse with 
parent and child elements in the DOM, just not adjacent elements.
>
> 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>
>
See this illustration: http://i.imgur.com/pBTPefE.png

The first <p> would appear as the first element in the page, with its 
default 1em margin.
<p.test1> would appear exactly as it does under the current rules: It 
would be flush with the top of the first <div.float>. Its top margin 
would collapse with that of the first <p>.
<p.test2> is ineligible for collapse, so its top margin would be added 
to that of the first <div.float> above it. It would appear 1em below 
that element.
>
>
> 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>
>
<p.test2>'s margin would not collapse with the wrapper. The 
<div.wrapper> has declared that its margins are ineligible for 
collapsing. The <p.test2> has declared that it is eligible for 
collapsing, but its margins cannot collapse with an ineligible element.
>
>
>> 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'.
I don't understand what you're saying here.
>
> Alan
[1] https://developer.mozilla.org/en-US/docs/Web/CSS/margin_collapsing

Jon

Received on Wednesday, 30 July 2014 13:47:31 UTC