Why Do Margins Disappear?

We already know about margin collapse, but how to stop it? The secret lies in creating BFC (Block Formatting Context) — an independent formatting area.

When Margins DON'T Collapse:

If a " barrier " appears between blocks or parent and child:

1. Padding or Border: Even 1px border stops collapse.
2. Overflow: Value hidden, auto, or scroll creates BFC.
3. Display: inline-block, flex, grid — collapse doesn't exist inside them.

.parent {
  display: flow-root; /* Most modern way to create BFC and stop collapse */
}