我知道这应该很简单，但有人能告诉我为什么以下代码中的子元素在应用margin-top: 50%时会超出父容器的边界吗？margin-top的百分比是如何计算的？
.container {
background: lightblue;
padding: 10px;
height: 200px;
}
p {
display: block;
border:1px solid red;
margin-top:50%;
}
<div class="container"> <p> Some Cool content</p> </div>
子元素不应该距离父元素的顶部是200px（父元素设置的高度）的50%，即距离顶部100px吗？
百分比基准的边距是根据父容器的宽度计算的，不管边距位于哪一侧。
所以你看到的是上边距等于宽度的50%。
来自W3C规范：
有两个很好的理由将垂直边距基于包含块的宽度：
水平和垂直一致性
当然，有一个简写属性可以让您指定块的四个边的边距：
这会扩展为：
现在，如果您写了上述任何一个，您可能期望块的四个边的边距大小相等，对吗？但是，如果margin-left和margin-right基于容器的宽度，而margin-top和margin-bottom基于其高度，则它们通常会不同！
避免循环依赖
CSS在页面上垂直堆叠块中布局内容，因此块的宽度通常完全由其父元素的宽度决定。换句话说，您可以计算块的宽度，而不必担心块内部的内容。
块的高度是另一回事。通常，高度取决于其内容的组合高度。更改内容的高度，将改变块的高度。看到问题了吗？
要获取内容的高度，您需要知道应用于其上的顶部和底部边距。如果这些边距依赖于父块的高度，那么您就有麻烦了，因为您无法在不知道另一个的情况下计算一个！
基于容器的宽度的垂直边距打破了这种循环依赖关系，并使得页面布局成为可能。
示例：
这是一个示例。以及代码：
HTML
CSS
.container { background: lightblue; padding: 10px; height: 100px; width: 500px; } p { display: block; border: 1px solid red; margin-top: 50%; }JS
window.onload = function(evt) { var element = document.getElementById("element"), style = element.currentStyle || window.getComputedStyle(element); element.textContent = "margin-top是：" + style.marginTop; };