html/css why does margin-top of a inner-div bleed ouside the outer-div?

Question

I have a simple piece of html code like this

<div class="outer-div">
    <div class="inner-div" style="margin:1em"></div>
</div>

why does margin-top of the inner-div bleed out and not push the it down? If I add a padding top in the outer-div of only 1px, the bleeding stops.

thanks!