Margin Collapse

The Rules of Margin Collapse Mastering Margin Collapse

Example 1 - Adjacent siblings

Box 1

Box 2

Example 2 - No content separating parent and descendants

Box 1

Example 3 - Empty blocks

Example 4 - Horizon siblings

Box 1

Box 2

=> Only vertical margins collapse

Example 5 - Ex1 Answer

Box 1

Box 2

=> add separator between Box 1 and Box 2

Example 6 - Ex1 Answer

Box 1

Box 2

=> Box 1 is in new formatting context

Example 7 - Ex2 Answer

Box 1

Example 8 - Ex3 Answer