Wie wird der Margin-Top-Prozentsatz berechnet?

Question

Ich weiß, das sollte einfach sein, aber kann mir jemand sagen, warum die untergeordneten Elemente im folgenden Code über die Grenzen des übergeordneten Containers hinausgehen, wenn margin-top: 50% angewendet wird? Wie wird der Prozentsatz der Margin-Top berechnet?

.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>

Sollte das untergeordnete Element nicht 50 % von 200 Pixeln (vom übergeordneten Element festgelegte Höhe) vom oberen Rand des übergeordneten Elements entfernt sein, also 100 Pixel vom oberen Rand?

Answer 1

百分比基准的边距是根据父容器的宽度计算的，不管边距位于哪一侧。

所以你看到的是上边距等于宽度的50%。

Answer 2

来自W3C规范：

有两个很好的理由将垂直边距基于包含块的宽度：

水平和垂直一致性

当然，有一个简写属性可以让您指定块的四个边的边距：

margin: 10%;

这会扩展为：

margin-top: 10%;
margin-right: 10%;
margin-bottom: 10%;
margin-left: 10%;

现在，如果您写了上述任何一个，您可能期望块的四个边的边距大小相等，对吗？但是，如果margin-left和margin-right基于容器的宽度，而margin-top和margin-bottom基于其高度，则它们通常会不同！

避免循环依赖

CSS在页面上垂直堆叠块中布局内容，因此块的宽度通常完全由其父元素的宽度决定。换句话说，您可以计算块的宽度，而不必担心块内部的内容。

块的高度是另一回事。通常，高度取决于其内容的组合高度。更改内容的高度，将改变块的高度。看到问题了吗？

要获取内容的高度，您需要知道应用于其上的顶部和底部边距。如果这些边距依赖于父块的高度，那么您就有麻烦了，因为您无法在不知道另一个的情况下计算一个！

基于容器的宽度的垂直边距打破了这种循环依赖关系，并使得页面布局成为可能。

示例：

这是一个示例。以及代码：

HTML

<div class="container">
  <p id="element">一些很酷的内容</p>

</div>

<p>
  更多文本
</p>

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;
};