如果你看CSS box model spec，你会发现:
[margin]百分比是根据生成的框的width个包含块计算的.Note that this is true for 'margin-top' and 'margin-bottom' as well.如果包含块的宽度取决于这个元素，那么结果布局在CSS 2.1中是未定义的.(emphasis mine)
的确如此.但是why？到底是什么迫使人们这样设计呢？很容易想到你想要的场景，例如某个东西总是比页面顶部低25%，但很难找到任何理由来解释为什么你想要垂直填充相对于父对象的水平大小.
下面是我提到的现象的一个例子:
<div style="border: 1px solid red; margin: 0; padding: 0; width: 200px; height: 800px;">
This div is 200x800.
<div style="border: 1px solid blue; margin: 10% 0 0 10%;">
This div has top-margin of 10% and left-margin of 10% with respect to its parent.
</div>
</div>