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