html / css为什么内部div的margin-top溢出外部div？

Question

我有一个像这样的简单的HTML代码

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

为什么内部div的顶部溢出而不是将其推下来？ 如果我在仅1px的外部div中添加填充顶部，则会出血停止。

谢谢！