為什麼我的'margin-top”百分比會溢出容器？

計算Margin-Top 百分比：了解基於寬度的方法

在CSS 中，垂直邊距（包括margin-top）是根據包含塊的寬度。這種方法確保了邊距測量的水平和垂直一致性，並避免佈局內容時的循環依賴。

水平和垂直一致性：

簡寫 margin 屬性可讓您設定所有四個邊的邊距。如果垂直邊距是基於高度而不是寬度，則不同邊的邊距通常會具有不同的大小，從而破壞一致的行為。

避免循環依賴：

CSS 版面配置在垂直區塊中輸出內容。塊的寬度通常由其父塊的寬度決定。然而，區塊的高度取決於其內容並且可以動態變化。如果垂直邊距取決於高度，則父級高度和子級邊距之間將存在循環依賴關係。

範例：

考慮以下程式碼，其中子元素有一個margin-top: 50%:

<div class="container">
  <p>Some Cool Content</p> 
 
</div>

.container {  
  background: lightblue; 
  padding: 10px; 
  height: 200px;
}

p { 
  display: block; 
  border:1px solid red;
  margin-top:50%;
}

與子元素低於容器頂部(100px) 50% 的預期相反，它溢出了容器的高度。這是因為百分比邊距是基於容器的寬度，而不是高度。在本例中，容器的寬度為 500px，導致 margin-top 為 250px。

總而言之，垂直邊距計算是基於包含塊的寬度，以確保一致性，避免循環依賴並實現高效佈局施工。

以上是為什麼我的'margin-top”百分比會溢出容器？的詳細內容。更多資訊請關注PHP中文網其他相關文章！