[css2.1] Issue 158 and Issue 178 Resolution

I have two issues on me concerning margins, particularly around
clearance.  This is an attempt to resolve both of them.

Executive summary: After extensive discussion and studying of several
testcases, I've determined that the spec accurately and correctly
describes the current and intended behavior of margin-collapsing in
nearly all cases.  However, it takes an *extremely* detailed and
intricate reading to figure out just what the described behavior *is*,
and is nearly impossible without reverse-engineering against current
implementations.  Thus I will attempt as far as possible to add only
informative notes and diagrams to clarify the more subtle points of
the algorithm.  However, some normative changes will occur, as there
are some very small corner cases where implementations and spec
disagree.

Change 1
--------

In 8.3.1, sixth bullet point, second sub-bullet point, add the
following after the current text:
"(In other words, for the purpose of positioning the element's top
border edge, the following siblings of the element do not
margin-collapse with the element.)"

Change 2
--------

In 8.3.1, sixth bullet point, after the last paragraph add the
following example block:

"""
This rule can sometimes result in margins appearing to collapse in
strange ways.  The interactions of the rules is very simple in
practice, though; one must just keep in mind that different sets of
margins may be considered when determining the position of different
elements.

For example, the following diagram illustrates how one element (the
blue line) positions itself without collapsing its 100px margin-top
with the following red box's 150px margin-top.  This special case only
occurs because the blue line has no content, and thus its top and
bottom margins are self-adjoining.  (Ordinarily you can't detect this
behavior, because a self-adjoining box has no content, background, or
border, but the use of outline or border-image can reveal its position
without changing the behavior of its margins.)

[[insert picture 1]]

Note, though, that when calculating the position of the red box, *do*
collapse its margin with the blur box's margin.  The red box simply
positions itself as normal, with its 150px margin collapsing with the
blue box's 100px margin, for a total effective margin of 150px.  Since
the red box pays no attention to the position of the blue box, this
distance is measured from the top of the parent.

This diagram illustrates a slightly different situation.  It is the
same as before, but now the red box has a margin-top of only 50px.
While the previous diagram didn't actually require the red box to
collapse its margin with the blue box's margin, in this case we see
that the collapse definitely occurs, as the red box positions itself
using its new effective margin-top of 100px.

[[insert picture 2]]
"""

Change 3
--------

In section 9.5.2, at the end of the paragraph starting "Computing the
clearance of an element...", delete from "previous adjacent margins"
to the end of the sentence.  Replace it with "adjoining margins,
according to the margin-collapsing rules in 8.3.1".

Change 4
--------

In section 9.5.2, replace the second step of the clearance algorithm with:

"""
2. The size of the clearing element's top margin (possibly collapsed
with other margins, as detailed earlier in this section) minus the sum
of:
 * the margins collapsing above the clearance
 * if the block's own margins collapse together: the block's top
margin, by itself
 * if the blocks' own margins do not collapse together: the margins
collapsing below the clearance
"""

Change 5
--------

In section 9.5.2, after the paragraph starting "Clearance is
introduced...", add the following example block:

"""
Note: Clearance, once introduced, takes up permanent space on the
page.  In particular, elements other than the cleared element may have
their position directly affected by it.  For example, if the clearing
element is empty and has self-adjoining margins, a following sibling's
margin may collapse through it.  The sibling will then also use the
clearance to position itself, as the following diagram illustrates:

[[insert picture 3]]
"""

To reiterate, Changes 1, 2, and 5 make no normative changes.  They
simply add informative notes and examples to make the meaning of their
surrounding sections clearer.

Change 3 is a minor normative change to match implementations, and in
the process simplifies that section from defining an entirely unique
set of collapsing margins to using the standard set of margins.

Change 4 shouldn't be a normative change unless I've screwed something
up.  I've just rephrased things to eliminate an unclear pronoun and
rephrase the self-referential statement that can appear broken to a
quick reading.

However, I'm not 100% certain the spec around Change 4 matches
implementations right now.  I'll need to experiment more with it.

~TJ

Received on Thursday, 5 August 2010 21:22:55 UTC