Re: [CSS2.1] Clarifying 8.3.1 Collapsing Margins

This is for CSS2.1 Issue 159
   http://wiki.csswg.org/spec/css2.1#issue-159
triggered by this email
   http://lists.w3.org/Archives/Public/www-style/2010Feb/0015.html

This is version 3.

  | In CSS, the adjoining margins of two or more boxes (which could be
  | siblings or nested) can combine to form a single margin.
  | Margins that combine this way are said to <dfn>collapse</dfn>, and
  | the resulting combined margin is called a <dfn>collapsed margin</dfn>.
  |
  | Adjoining vertical margins collapse, except:
  |   * Margins of the root element's box do not collapse.
  |   * If the top and bottom margins of an element with clearance are
  |     adjoining, its margins collapse with the adjoining margins of
  |     following siblings but that resulting margin does not collapse
  |     with the bottom margin of the parent block.
  | Horizontal margins never collapse.
  |
  | Two margins are adjoining if and only if:
  |   * both belong to normal-flow block-level boxes that participate
  |     in the same block formatting context
  |   * no line boxes, no clearance, and no non-empty padding or border
  |     areas separate them
  |   * both belong to vertically-adjacent box edges, i.e. form one of
  |     the following pairs:
  |       - top margin of a box and top margin of its first in-flow child
  |       - bottom margin of box and top margin of its immediately
  |         following in-flow sibling
  |       - bottom margin of a last in-flow child and bottom margin
  |         of its parent if the parent has 'auto' height
  |       - top and bottom margins of a box with zero used height and
  |         no in-flow children
  | A collapsed margin is considered adjoining to another margin if
  | any of its component margins is adjoining to that margin.
  |
  | Note. Adjoining margins can be generated by elements that are not
  | related as siblings or ancestors.
  |
  | Note the above rules imply that:
  |   * Vertical margins between a floated box and any other box do not
  |     collapse (not even between a float and its in-flow children).
  |   * Vertical margins of elements that establish new block formatting
  |     contexts (such as floats and elements with 'overflow' other than
  |     'visible') do not collapse with their in-flow children.
  |   * Margins of absolutely positioned boxes do not collapse (not even
  |     with their in-flow children).
  |   * Margins of inline-block elements do not collapse (not even with
  |     their in-flow children).
  |   * The bottom margin of an in-flow block-level element always
  |     collapses with the top margin of its next in-flow block-level
  |     sibling, unless that sibling has clearance.
  |   * The top margin of an in-flow block element collapses with
  |     its first in-flow block-level child's top margin if the
  |     element has no top border, no top padding, and the child has
  |     no clearance.
  |   * The bottom margin of an in-flow block element with a
  |     'height' of 'auto' collapses with its last in-flow block-level
  |     child's bottom margin if the element has no bottom padding and
  |     no bottom border and the child's bottom margin does not collapse
  |     with a top margin that has clearance.
  |   * An element's own margins collapse if the 'min-height' property
  |     is zero, and it has neither top or bottom borders nor top or
  |     bottom padding, and it has a 'height' of either 0 or 'auto', and
  |     it does not contain a line box, and all of its in-flow children's
  |     margins (if any) collapse.
  |
  | When two or more margins collapse, the resulting margin width is the
  | maximum of the collapsing margins' widths. In the case of negative
  | margins, the maximum of the absolute values of the negative adjoining
  | margins is deducted from the maximum of the positive adjoining margins.
  | If there are no positive margins, the absolute maximum of the negative
  | adjoining margins is deducted from zero.
  |
  | If the top and bottom margins of a box are adjoining, then it is
  | possible for margins to collapse through it. In this case, the
  | position of the element depends on its relationship with the other
  | elements whose margins are being collapsed.
  |   * If the element's margins are collapsed with its parent's top
  |     margin, the top border edge of the box is defined to be the
  |     same as the parent's.
  |   * Otherwise, either the element's parent is not taking part in
  |     the margin collapsing, or only the parent's bottom margin is
  |     involved. The position of the element's top border edge is
  |     the same as it would have been if the element had a non-zero
  |     bottom border.
  | Note that the positions of elements that have been collapsed through
  | have no effect on the positions of the other elements with whose
  | margins they are being collapsed; the top border edge position is
  | only required for laying out descendants of these elements.

~fantasai

Received on Thursday, 19 August 2010 18:36:45 UTC