W3C home > Mailing lists > Public > www-style@w3.org > September 2013

Re: [css3-multicol] margin collapsing between column-spanning element and blocks in column boxes: if, when?

From: Gérard Talbot <www-style@gtalbot.org>
Date: Fri, 27 Sep 2013 15:18:21 -0400
To: Morten Stenshorne <mstensho@opera.com>
Cc: Håkon Wium Lie <howcome@opera.com>, W3C www-style mailing list <www-style@w3.org>
Message-ID: <5d40ebefafba6123d657daf25ad4f26b@gtalbot.org>
Le 2013-09-27 07:32, Morten Stenshorne a écrit :
> Håkon Wium Lie <howcome@opera.com> writes:
> 
>> Gérard Talbot wrote:
>> 
>>  > One issue that I wish would be explicit and clarified in the spec 
>> is if
>>  > margin collapsing can occur between a column-spanning element and 
>> blocks
>>  > in column boxes. If it can occur, then the spec should say so, then 
>> define
>>  > under which conditions along with an example. If it does not occur, 
>> then
>>  > the spec should say so.
>> 
>> The answer is: yes, margin collapsing occur as per the normal rules.
>> That is, margin collapsing will not to through the content/border box
>> of a spanner or a multicol element (both are BFCs), but the margins of
>> a spanner will collapse with its surroundings.
> 
> This has been discussed before, and the opposite conclusion was 
> reached.
> 
> http://lists.w3.org/Archives/Public/www-style/2010Oct/0774.html
> 

News to me.

> I rather we kept it that way (and add it to the spec if it's
> unclear). Collapsing spanner margins with regular content is going to
> cause rather unpredictable behavior, and writing or reading a spec for
> that doesn't sound like fun, either.
> 
> We'd need to figure out if the last margin in the columns is indeed
> adjoining with the top margin of the spanner. Example:
> 
>         <div style="columns:2;">
>             <div style="height:100px;">x</div>
>             <div style="break-before:column; 
> margin-bottom:50px;">x</div>
>             <div style="margin-top:10px; 
> column-span:all;">spanner</div>
>         </div>
> 

Same code as above, except I set margin-top: 40px to the spanner.

http://www.gtalbot.org/BrowserBugsSection/CSS3Multi-Columns/multicol-margin-collapsing-spanner-456.xht


> In this case not adjoining. That's pretty obvious in this case, thanks
> to simple content and there's even a forced break to guide us. But it's
> going to cause rather "random" behavior in more complex cases.
> 
> Secondly, if such margins collapse, where to put the final collapsed
> margin? Inside column contents, or outside, just next to the spanner?
> That decision will affect the length of the column rules. Example:
> 
>         <div style="columns:2; column-rule:solid;">
>             <div style="height:50px;">x</div>
>             <div style="break-before:column; 
> margin-bottom:100px;">x</div>
>             <div style="column-span:all;">spanner</div>
>         </div>

Same code as above, except there is a 1em column-gap without a 
column-rule:

http://www.gtalbot.org/BrowserBugsSection/CSS3Multi-Columns/multicol-margin-collapsing-spanner-457.xht


> 
> vs.:
> 
>         <div style="columns:2; column-rule:solid;">
>             <div style="height:50px;">x</div>
>             <div style="break-before:column;">x</div>
>             <div style="margin-top:100px; 
> column-span:all;">spanner</div>
>         </div>
> 

Same code as above, except there is a 1em column-gap without a 
column-rule:

http://www.gtalbot.org/BrowserBugsSection/CSS3Multi-Columns/multicol-margin-collapsing-spanner-458.xht


Gérard

> If we allow such margins to collapse, I believe the rendering of the 
> two
> preceding examples should be identical. But I just find that weird.
> 
> Better not go there, IMHO.
> 
>> I don't want to add normative text about this as it's a terribly
>> complex part of CSS 2.1 and the multicol spec should not try repeat it
>> or change it. But having an example makes sense -- I've added an
>> example 26 in the current ED:
>> 
>>   http://dev.w3.org/csswg/css-multicol/#column-span
> 
> That's example _27_, right?

It must be example 27. Example numbers are auto-incremented:
.example {
	counter-increment: exampleno;
}


> This only illustrates margin collapsing
> between spanners. That's much less problematic, and I have no strong
> opinions on that matter. If you like to think of spanners as regular
> blocks inside a multicol container (which has temporarily lost its
> multicolumnedness), it's kind of natural that sibling spanners get 
> their
> margins collapsed.
> 
>>  > If margin collapsing can occur between column-spanning element and 
>> blocks
>>  > in column boxes, then it could be possible to create tests where 
>> several
>>  > blocks' margin-top collapses with a preceding-sibling 
>> column-spanning
>>  > element.
>> 
>> Yes, but remember that margins are trucated after a natural break:
>> 
>>   http://dev.w3.org/csswg/css-break/#break-margins
> 
> How about this one:
> 
>         <div style="columns:2; column-rule:solid;">
>             <div style="column-span:all; 
> margin-bottom:50px;">spanner</div>
>             text
>             <div style="break-before:column; margin-top:50px;">x</div>
>         </div>
> 
> I really don't want those two margins to collapse. :)
Received on Friday, 27 September 2013 19:18:53 UTC

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:08:34 UTC