Escaping Margins
This refers to the top/bottom margins of a child block "escaping" from or "spilling outside" of a parent block.
Look at the HTML and CSS source code and you will see that the following parent div blocks (blue) have 0px margins,
and therefore should be stacked on top of each other with no space in between.
But the child paragraph blocks (grey) have 1em top/bottom margins that are escaping from the parent div blocks,
thereby creating the vertical space between the div blocks.
I am a paragraph with 1em margins on ALL sides inside a div block with 0px margins.
I am a paragraph with 1em margins on ALL sides inside a div block with 0px margins.
Here are a few more things to observe about the above example:
-- The left/right margins of grey child paragraphs are NOT escaping from the blue parents. Only top/bottom margins escape.
-- The escaped 1em top/bottom paragraph margins are collapsing down to 1em, rather then being added together.
The margin collapsing still applies since the escaped vertical margins are adjacent.
-- If you add top/bottom margins to the parent divs, that are smaller than 1em (say 1px),
then the child margins will still escape and just "absorb" the parent's margins (try it!).
Here's how to keep a child's margins from escaping the parent:
Basically the parent needs some "interior substance", that will "force" the top/bottom child margins to stay within the parent.
Each of the following will block the child's top/bottom margins from escaping the parent.
-- Content inside the parent above/below the child.