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: Morten Stenshorne <mstensho@opera.com>
Date: Fri, 27 Sep 2013 13:32:21 +0200
To: Håkon Wium Lie <howcome@opera.com>
Cc: www-style@gtalbot.org, "W3C www-style mailing list" <www-style@w3.org>
Message-ID: <877ge2zeii.fsf@aeneas.oslo.osa>
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

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>

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>

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>

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? 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. :)

-- 
---- Morten Stenshorne, developer, Opera Software ASA ----
------------------ http://www.opera.com/ -----------------
Received on Friday, 27 September 2013 11:32:31 UTC

This archive was generated by hypermail 2.3.1 : Friday, 27 September 2013 11:32:31 UTC