Share via

2.1.33 [CSS-Level2-2009] Section 8.3.1, Collapsing margins

V0038:

The specification states:

 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.

Quirks Mode and IE7 Mode (All Versions)

If the top and bottom margins of a box are adjoining, the box prevents margins from collapsing through it. 

Note In Internet Explorer 7, parent elements that have "layout" can cause child elements to collapse margins and padding incorrectly. An element that sets hasLayout is responsible for sizing and arranging its own content. For more information, see [MSDN-HasLayout].

V0039:

The specification states:

 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.

Quirks Mode (All Versions)

The top margin of an element is not collapsed with its parent’s top margin.

IE7 Mode (All Versions)

Margin collapsing is prevented when one of the following conditions is true:

  • The element has a specified width and/or height

  • The element is an inline-block

  • The element is absolutely positioned

  • The element is a float

  • The element is a table

  • The element is transformed – e.g. style = "zoom:1"

Note In Internet Explorer 7, any of the preceding conditions will cause an element to gain "layout." An element that sets hasLayout is responsible for sizing and arranging its own content. For more information, see [MSDN-HasLayout].

V0040:

The specification states:

 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.

Quirks Mode (All Versions)

The top margin of an element is not collapsed with the top margin of its parent.

IE7 Mode (All Versions)

Margin collapsing is prevented when one of the following conditions is true:

  • The element has a specified width and/or height

  • The element is an inline-block

  • The element is absolutely positioned

  • The element is a float

  • The element is a table

  • The element is transformed; for example, zoom:1

V0041:

The specification states:

 The bottom margin of an in-flow block-level element is always adjoining to the top 
 margin of its next in-flow block-level sibling, unless that sibling has clearance.

Quirks Mode and IE7 Mode (All Versions)

Clearance is evaluated and applied before the margins are collapsed.

V0197:

The specification states:

 The top margin of an in-flow block box is adjoining to 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.

Quirks Mode and IE7 Mode (All Versions)

Margins do not collapse under the specified conditions.

V0198:

The specification states:

 An element's own margins are adjoining 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) are adjoining.

Quirks Mode and IE7 Mode (All Versions)

An element’s own margins do not collapse under the specified conditions.

V0199:

The specification states:

When an element's own margins collapse, and that element has clearance, its top margin collapses with the adjoining margins of subsequent siblings but that resulting margin does not collapse with the bottom margin of the parent block.

Quirks Mode and IE7 Mode (All Versions)

An element’s top margin does not collapse with the adjoining margins of subsequent siblings when clearance is applied to it.

V0200:

The specification states:

 Collapsing is based on the used value of 'padding', 'margin', and 'border' (i.e., 
 after resolving any percentages). The collapsed margin is calculated over the used 
 value of the various margins.

Quirks Mode and IE7 Mode (All Versions)

Collapsing is not based on the used value of padding, margin, and border; if these properties are specified in percentage units that evaluate to 0, the margins do not collapse.