How can you prevent margin collapsing between parent and child elements?

Difficulty: 5/10

margin collapsing, block formatting context, CSS layout

Preventing Margin Collapsing Between Parent and Child Elements

Margin collapsing occurs when the vertical margins of a parent and its first or last child element merge into a single margin. This often reduces the expected spacing, especially when designing nested layouts.

Example: Collapsing Between Parent and Child

In this case, the top margin of the child merges with the parent's top edge. The margin doesn’t create space inside the parent; instead, it pushes the parent itself downward.

Ways to Prevent Margin Collapsing

1
Add padding to the parent (e.g., padding-top: 1px;).
2
Add a border to the parent (even border: 1px solid transparent; works).
3
Use overflow: auto; or overflow: hidden; on the parent to create a new block formatting context.
4

These techniques ensure the parent and child margins remain independent, giving you full control over spacing inside nested elements.

Scenario Questions

0-2 years experience

Follow-up Questions