Why do child margins render outside of divs?

Question

Could someone explain to me what are the possible benefits of the CSS behavior where a child elements top and bottom margins render outside the block-parents render bounds?

See this fiddle for a super simple example. The pink div is affected by the h1's margins.

I'm guessing it has something to do with collapsing margins, but it's really not clear to me.

Answer 1

styles by straight:

1. Body.
2. Pure html.
3. Css..

is pure html. he will affect all divs.