W3C home > Mailing lists > Public > www-style@w3.org > August 2010

Re: [css2.1] Issue 158 and Issue 178 Resolution

From: Tab Atkins Jr. <jackalmage@gmail.com>
Date: Thu, 12 Aug 2010 16:20:36 -0700
Message-ID: <AANLkTinSSiwuMUWXLgeTtBGm8Gx38N0BzHbp0hAiDR3v@mail.gmail.com>
To: www-style list <www-style@w3.org>
All right, try 2.  I'm pretty certain I have a complete and correct
grasp of margin-collapsing and clearance loaded into my brain right

Now, none of these changes are normative changes.  They should all
only be clarifications or rephrasings to make things easier to

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

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 the last sentence of the paragraph.

Replace it with:

To determine the hypothetical position, collapse the top
margin of the clearing element with preceding adjoining margins per the
margin-collapsing rules in section 8.3.1, as if the element does not
have clearance. (Note: Only use the *preceding* adjoining margins - in
particular, for the purpose of determining the hypothetical position,the
top margin of the clearing element does not collapse with the margins of
its children or its own bottom margin.)  Call the resultant margin the
"hypothetical top margin".

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
 * 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]]

(Once again, all pictures are located at
http://lists.w3.org/Archives/Public/www-archive/2010Aug/0006.html )

Received on Thursday, 12 August 2010 23:21:38 UTC

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:07:49 UTC