margin是根据父元素的宽度来计算的还是根据高度来计算的？

例：根据下面代码，.subbox盒子距.box盒子顶部距离多大？ 
.box{ float: left; width: 300px; height: 200px; }
.subbox { margin-top:50%;}
<div class=”box”>
<div class=”subbox”></div>
</div>

一般思路的解答：根据给出的代码，.subbox 盒子的 margin-top 设置为 50%。这意味着 .subbox 盒子距离其父元素 .box 盒子顶部的距离是 .box 盒子高度的一半。
由于 .box 盒子的高度为 200px，所以 .subbox 盒子距离 .box 盒子顶部的距离是 200px * 50% = 100px。

正确的解答：
在CSS中，百分比margin是根据父元素的宽度来计算的，而不是高度。因此，当.subbox的margin-top设置为50%时，它实际上是相对于.box的宽度计算的，而不是高度。
由于.box的宽度是300px，所以.subbox的margin-top计算为：
margin-top=300px×50%=150px

因此，.subbox盒子距离.box盒子顶部的距离是150px。

在W3C的CSS规范，其中提到：
"Percentage margins and paddings are always calculated against the respective dimension of the containing block (usually the parent element)."
这意味着百分比边距总是相对于包含块（通常是父元素）的相应维度计算的。在本例中，相应的维度是宽度，因为margin-top是垂直方向上的，而垂直方向的边距和填充是相对于水平方向的容器尺寸计算的。