margin-top百分比的計算過程是什麼？

Question

我知道這應該很簡單，但有人能告訴我為什麼以下程式碼中的子元素在應用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嗎？

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