8.3.1 Collapsing margins

Chapter 8 - Box model - 8.3.1 Collapsing margins

Go to the relevant page of the specification.

abspos-022 (may)
position: fixed; top: auto; test - margin collapsing
background-bg-pos-205 (image, scroll)
Background Position: bottom right and the scrolling viewport
blocks-017
CSS Blocks: Margin Collapsing
c411-vt-mrgn-000
Vertical Formatting
margin-collapse-001 (ahem)
Margin collapsing - horizontal margins do not collapse
Horizontal margins of element do not collapse.
margin-collapse-002 (ahem, image)
Margin collapsing - maximum of the two adjoining margins
When margins collapse the margin is the maximum of the two margin widths.
margin-collapse-003
Margin collapsing - negative margins adjoining positive margins
Negative margins deduct from the maximum of the adjoining positive margin.
margin-collapse-004
Margin collapsing - negative margins deducted from zero
Negative margins are deducted from zero if no positive margins are adjoining.
margin-collapse-005 (ahem, image)
Margin collapsing - adjoining margins of non-siblings or ancestors
Adjoining margin boxes generated by elements, that are not related by siblings or ancestors, collapse.
margin-collapse-006 (ahem, image)
Margin collapsing - floated elements do not collapse margins
A floated box does not collapse its margins with any other box.
margin-collapse-007 (ahem, image)
Margin collapsing - floated elements do not collapse margins with children
In-flow children of a floated element do not collapse margins.
margin-collapse-008 (ahem, image)
Margin collapsing and elements with 'overflow' set to 'visible'
Elements with 'overflow' set to 'visible' collapse margin with in-flow children.
margin-collapse-009 (ahem)
Margin collapsing and elements with 'overflow' set to 'hidden'
Elements with 'overflow' set to 'hidden' do not collapse margin with in-flow children.
margin-collapse-010 (ahem)
Margin collapsing and elements with 'overflow' set to 'scroll'
Elements with 'overflow' set to 'scroll' do not collapse margin with in-flow children.
margin-collapse-011 (ahem)
Margin collapsing and elements with 'overflow' set to 'auto'
Elements with 'overflow' set to 'auto' do not collapse margin with in-flow children.
margin-collapse-012 (ahem, image)
Margin collapsing - absolute positioning and siblings
Absolutely positioned boxes do not collapse margins with siblings.
margin-collapse-013 (ahem, image)
Margin collapsing - absolute positioning with children elements
Absolutely positioned boxes do not collapse margins with any in-flow children.
margin-collapse-014 (ahem, image)
Margin collapsing - inline-block elements as siblings
Inline-block elements that are siblings do not collapse their margins.
margin-collapse-015 (ahem, image)
Margin collapsing - inline-block child does not collapse margins with parent
An element that is set in inline-block and its children set to inline-block do not collapse margins.
margin-collapse-016 (ahem, image)
Margin collapsing - top/bottom margins adjoining collapse through
When top and bottom margins are adjoining margins collapse through that element.
margin-collapse-017
Margin collapsing - parent edge and element edge are the same when margins collapse
When the top margin of a child box collapses with the top margin of its parent, then the margin-top edge of such child box is the same as the parent's and their respective content should be 'sitting' at the parent's border-bottom (in the testcase, the black line) assuming the same height value and the same padding-bottom value for the parent and its child box.
margin-collapse-018 (ahem, image)
Margin collapsing - element with clearance
An element that has clearance applied to it will not collapse its top margin with its parent's bottom margin.
margin-collapse-019 (ahem, image)
Margin collapsing - elements that collapse margins have to effect on positions of other elements that also have margins that are collapsing
Positions of elements that have been collapsed through (empty elements) have no effect on positions of other elements whose margins are being collapsed.
margin-collapse-020 (ahem, image)
Margin collapsing with the root element
For HTML pages the html element does not collapse its margins with other elements.
margin-collapse-021 (HTMLonly, ahem, image)
Margin collapsing with the 'body' element
For HTML pages the 'body' element's margins collapse.
margin-collapse-022 (ahem, image)
Margin collapsing - adjoining block boxes
Bottom margin of an in-flow block-level element is always adjoining to the top margin of its next in-flow block-level sibling.
margin-collapse-023 (ahem, image)
Margin collapsing - clearance applied to sibling
If an in-flow block-level sibling (#div4) has clearance applied to it, then it will not adjoin its top margin with the bottom margin of its previous in-flow sibling (#div2).
margin-collapse-024 (ahem, image)
Margin collapsing - in-flow block-level margin adjoining child's margin
When an in-flow block-level element (#div3) is adjoining its in-flow block-level child's top margin and the child has no top border, no top padding or no clearance applied to it, then such top margins collapse.
margin-collapse-025 (ahem, image)
Margin collapsing - in-flow block-level margins with an element 'height' of 'auto' and 'max-height' and 'min-height'
The bottom margin of an in-flow block-level element(#div2) with a 'height' of 'auto' will adjoin to its last in-flow block-level child's (#div3) bottom margin if such auto-height in-flow block-level element has no bottom padding and no bottom border. The bottom margins will then collapse.
margin-collapse-026 (ahem, image)
Margin collapsing - in-flow block-level margins with an element 'height' of 'auto' and 'min-height' of zero
An element's margins are adjoining and can collapse if the 'min-height' is zero, if it has no top or bottom borders and no top or bottom padding, if it has a 'height' of zero or 'auto', if it has no line boxes and if all of its in-flow children's margins are adjoining.
margin-collapse-027 (ahem, image)
Margin collapsing - bottom margin not collapse when cleared
When a last sibling has clearance, its own margins collapse and it collapsed its margins with a subsequent sibling, the last sibling does not collapse its bottom margin with its parent's bottom margin.
margin-collapse-028 (ahem, image)
Margin collapsing is based on used values of 'padding', 'margin' and 'border'
Collapsing of margins is based on the used values of 'padding', 'margin' and 'border'.
margin-collapse-029
Margin collapsing - position of top border edge for elements that collapse margins with parents not participating in margin collapsing
When margins collapse through empty elements and the parent element is not participating in margin collapsing then the position of the elements top border should be in the same position as if the element had a top border specified.
margin-collapse-030
Margin collapsing - position of top border edge for elements that collapse margins with parents whose bottom margin only participates in margin collapsing
When margins collapse through empty elements and only the parent element's bottom margin is participating in margin collapsing then the position of the elements top border should be in the same position as if the element had a top border specified.
margin-collapse-031
margin collapsing
The top margin of an in-flow block-level element 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.
margin-collapse-032
margin collapsing
Adjoining of vertical (top and bottom) margins must be determined only after resolving percentage padding-top and padding-bottom values.
margin-collapse-033
margin collapsing - clear
Margin-top of following siblings of a block on which 'clear' has been set (to a different value than 'none') must not be substracted when calculating clearance. When an element's own margins collapse, and that element has had clearance applied to it, its top margin collapses with the adjoining margins of following siblings.
margin-collapse-034
margin collapsing - clear
Margin-top of following siblings of a block on which 'clear' has been set (to a different value than 'none') must not be substracted when calculating clearance. When an element's own margins collapse, and that element has had clearance applied to it, its top margin collapses with the adjoining margins of following siblings.
margin-collapse-035
margin collapsing - clear
Margin-top of following siblings of a block on which 'clear' has been set (to a different value than 'none') must not be substracted when calculating clearance. When an element's own margins collapse, and that element has had clearance applied to it, its top margin collapses with the adjoining margins of following siblings.
margin-collapse-037
Collapsing margins - margin-bottom of the last in-flow child block collapsing with its parent min-height block's bottom margin
The 'min-height' of a parent block element should have no influence over whether such parent block element's bottom margin is adjoining to its last child's bottom margin. In such situation, the bottom margin of the parent block element and the bottom margin of its last child should collapse as long as such parent block element has no bottom padding and has no bottom border.
margin-collapse-038
Collapsing margins - margin-bottom of the last in-flow child block collapsing with its max-height parent block's bottom margin
The 'max-height' of a parent block element should have no influence over whether such parent block element's bottom margin is adjoining to its last child's bottom margin. In such situation, the bottom margin of the parent block element and the bottom margin of its last child should collapse as long as such parent block element has no bottom padding and has no bottom border.
margin-collapse-101
Margin Collapsing: in flow
margin-collapse-102
Margin Collapsing: absolutely positioned
margin-collapse-103
Margin Collapsing: fixed positioned
margin-collapse-104
Margin Collapsing: floats
margin-collapse-105
Margin Collapsing: in flow (relatively positioned)
margin-collapse-106
Margin Collapsing: in flow (simple)
margin-collapse-107
Margin Collapsing: in flow (used height)
This tests that emptiness is based on the computed values of height.
margin-collapse-108
Margin Collapsing: in flow (used border)
This tests that emptiness is based on the computed values of border.
margin-collapse-109
Margin Collapsing: in flow (used padding)
This tests that emptiness is based on the computed values of padding.
margin-collapse-110
Margin Collapsing: in flow (simple combinations)
margin-collapse-111
Margin Collapsing: in flow (simple combinations with collapse-through)
margin-collapse-112
Margin Collapsing: in flow (simple)
margin-collapse-113
Margin Collapsing: in flow (position of collapsed-through element)
margin-collapse-114
Margin Collapsing: in flow (position of collapsed-through element)
margin-collapse-115
Margin Collapsing: in flow (position of collapsed-through element)
margin-collapse-116
Margin Collapsing: in flow (position of collapsed-through element)
margin-collapse-117
Margin Collapsing: in flow (height)
margin-collapse-118
Margin Collapsing: in flow (height)
margin-collapse-119
Margin Collapsing: in flow (height)
margin-collapse-120
Margin Collapsing: in flow (height)
margin-collapse-121
Margin Collapsing: clear (control: no margins)
margin-collapse-122
Margin Collapsing: clear (simple)
margin-collapse-123
Margin Collapsing: clear (with nearby collapse-through block)
margin-collapse-125
Margin Collapsing: clear (on a self-collapsing block with a margin)
margin-collapse-126
Margin Collapsing: negative margins (easy)
margin-collapse-127
Margin Collapsing: negative margins (easy)
margin-collapse-128
Margin Collapsing: negative margins (easy)
margin-collapse-129
Margin Collapsing: negative margins (easy)
margin-collapse-130
Margin Collapsing: basic overflow test
margin-collapse-131
Margin Collapsing: in flow text (simple)
margin-collapse-132
Margin Collapsing: float positioning
margin-collapse-133
Margin Collapsing: float positioning
margin-collapse-134
Margin Collapsing: clear with no floats
margin-collapse-135
Margin Collapsing: negative margins with clear
margin-collapse-137
Margin Collapsing: margins on relative boxes
margin-collapse-138
Margin Collapsing: margins on relative boxes
margin-collapse-139
Margin Collapsing: top margins
margin-collapse-140
Margin Collapsing: top margins
margin-collapse-141
Margin Collapsing: top margins
margin-collapse-142
Margin Collapsing: clear (hard)
margin-collapse-143
Placement of out-of-flow object in elements that have been collapsed through
margin-collapse-145
Placement of out-of-flow object in elements that have been collapsed through
margin-collapse-146
Placement of out-of-flow object in elements that have been collapsed through
margin-collapse-147
Placement of out-of-flow object in elements that have been collapsed through
margin-collapse-148
Placement of out-of-flow object in elements that have been collapsed through
margin-collapse-151
Magical Margins should not be magical in strict mode
margin-collapse-154
Margin Collapsing: effect of margins near float on collapsing-through
margin-collapse-155
Margin Collapsing: effect of margins on collapsing-through
margin-collapse-156
Margin Collapsing: in flow (height, control) - not really margin collapsing
margin-collapse-157
Margin Collapsing: clear (varying margins)
margin-collapse-158
Margin Collapsing: clear (with nearby collapse-through block)
margin-collapse-159
Margin Collapsing: in flow (height, simple) - not really margin collapsing
margin-collapse-160 (paged)
Margins should not propagate into the next page
margin-collapse-162
Margin collapsing with floats before self collapsing children with margins collapsing with parent
margin-collapse-163
Margin collapsing with floats before self collapsing children with margins not collapsing with parent
margin-collapse-164
Margins on cleared blocks that contain floats
margin-collapse-165
Margins on cleared blocks that contain floats
margin-collapse-166
Margins on cleared blocks that contain floats, with dynamic border changes
margin-collapse-clear-000
Margin Collapsing with Clearance
margin-collapse-clear-001
Margin Collapsing with Clearance
margin-collapse-clear-002
Margin Collapsing with Clearance
margin-collapse-clear-003
Margin Collapsing with Clearance
margin-collapse-clear-004
Margin Collapsing with Clearance
margin-collapse-clear-005 (may)
Margin Collapsing with Clearance
margin-collapse-clear-006
Margin Collapsing with Clearance
margin-collapse-clear-007
Margin Collapsing with Clearance
margin-collapse-clear-008
Margin Collapsing with Clearance
margin-collapse-clear-009
Margin Collapsing with Clearance
margin-collapse-clear-010
Margin Collapsing with Clearance
margin-collapse-clear-011 (may)
Margin Collapsing with Clearance
margin-collapse-clear-012
Margin collapsing with clearance - margins of a 'collapsed through' box with clearance do not collapse with parent block's bottom margin
When an element has had clearance applied to it and its own margins collapse, these margins collapse with the adjoining margins of following siblings but the resulting margin does not collapse with the bottom margin of the parent block
margin-collapse-clear-013
Margin collapsing with clearance - margins of a 'collapsed through' box with clearance do not collapse with parent block's bottom margin
When an element has had clearance applied to it and its own margins collapse, these margins do not collapse with the bottom margin of the parent block
margin-collapse-clear-014
Margin collapsing with clearance - clearance may be negative
Clearance is created above the top margin of the element with clear set. Clearance can be negative. Clearance stops the collapsing of the element's margins with the preceding siblings' margins and with the parent block's bottom margin.
margin-collapse-clear-015
Margin collapsing with clearance - Margins collapsing of an element's top margin with its first in-flow child should not be affected by clear and clearance
When an element with clear set to it (to other than 'none') has a first in-flow child and their top margins are adjoining, then these margins should collapse normally.
margin-collapse-clear-016
Margin collapsing - margins of a 'collapsed through' box without clearance can collapse with parent block's bottom margin
An element that does not have clearance applied to it can collapse its top margin with its parent block's bottom margin. Margins of a 'collapsed through' box without clearance applied to it can collapse with its parent block's bottom margin. An element with clear set to it (to other than 'none') can only create a clearance if and when there is a preceding floated block.
margin-collapse-clear-017 (image)
Margin collapsing - margins of a 'collapsed through' box without clearance can collapse with parent block's bottom margin
An element that does not have clearance applied to it can collapse its top margin with its parent block's bottom margin. Margins of a 'collapsed through' box without clearance applied to it can collapse with its parent block's bottom margin. An element with clear set to it (to other than 'none') can only create a clearance if and when there is a preceding floated block.
table-margin-004
CSS Tables: Margin Collapsing