Podcast
Questions and Answers
Under what conditions do the margins of adjacent sibling elements NOT collapse in CSS?
Under what conditions do the margins of adjacent sibling elements NOT collapse in CSS?
- When the top margin of the first sibling is larger than the bottom margin of the second sibling.
- When the siblings are positioned using `position: relative`.
- When the second sibling has a `clear` property set to a value other than `none` to clear past floats. (correct)
- When both siblings have explicitly defined height and width properties.
Which scenario prevents the collapsing of a block's top margin with the top margin of its descendant blocks?
Which scenario prevents the collapsing of a block's top margin with the top margin of its descendant blocks?
- The descendant block is an inline element.
- The parent block has a border separating its top margin from the descendant's. (correct)
- The descendant block has a smaller margin than the parent block.
- The parent block's `overflow` property is set to `hidden`.
When does a block's top and bottom margins collapse with each other?
When does a block's top and bottom margins collapse with each other?
- When the block has no content, border, padding, height, or `min-height` separating its top and bottom margins. (correct)
- When the block's `position` property is set to `relative`.
- When the block contains only floated elements.
- When the block's `display` property is set to `inline-block`.
Which types of elements are NOT subject to margin collapsing?
Which types of elements are NOT subject to margin collapsing?
How is the size of a collapsed margin determined when the margins of adjacent siblings collapse?
How is the size of a collapsed margin determined when the margins of adjacent siblings collapse?
Flashcards
Margin Collapsing
Margin Collapsing
The overlapping of margins between adjacent block-level elements, where the larger margin takes precedence.
Sibling Margin Collapsing
Sibling Margin Collapsing
Margins of elements that are siblings and next to each other will collapse; unless clearing is needed to move past floats.
Parent-Child Margin Collapsing
Parent-Child Margin Collapsing
If a parent element has no separation from its child (like padding or a border), their margins collapse, pushing the child's margin to the parent.
Empty Block Margin Collapsing
Empty Block Margin Collapsing
Signup and view all the flashcards
Margins that don't collapse
Margins that don't collapse
Signup and view all the flashcards
Study Notes
- Top and bottom margins of blocks may combine into a single margin, a behavior known as margin collapsing.
- The size of the single margin is the largest of the individual margins if they differ, or just one of them if they are equal.
- Margins of floating and absolutely positioned elements never collapse.
Margin collapsing occurs in these cases:
- Margins of adjacent siblings collapse, unless the latter sibling needs to be cleared past floats.
- If there is no separation (border, padding, inline part, block formatting context, or clearance) between the margin-top of a block and the margin-top of its descendants, those margins collapse, ending up outside the parent.
- If there is no separation (border, padding, inline content, height, or min-height) between the margin-bottom of a block and the margin-bottom of its descendants then those margins collapse.
- If there is no separation (border, padding, inline content, height, or min-height) between a block's margin-top and margin-bottom, then its top and bottom margins collapse.
Studying That Suits You
Use AI to generate personalized quizzes and flashcards to suit your learning preferences.
Description
Margin collapsing in CSS is explained. Adjacent margins, margins of parent and child elements can collapse. Floating and absolutely positioned elements are not affected.
