WeasySuite - 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