為什麼CSS中的Margin-Top百分比是根據寬度計算的？

如何在 CSS 中計算 margin-top 百分比？

將 margin-top 百分比應用於父容器中的子元素時，了解百分比的計算方式非常重要。百分比邊距是相對於包含區塊的寬度，而不是高度。

W3C 規範

根據 W3C 規範，邊距頂部百分比的計算方式為相對於包含區塊的寬度，而非高度。這確保了水平和垂直邊距之間的一致性，並避免計算元素高度時的循環依賴。

基於寬度的邊距計算的原因

基於寬度有兩個主要原因包含塊寬度上的垂直邊距：

• 水平和垂直一致性： margin-top 和margin-bottom 百分比應相對於margin-left 和margin 表現一致-右百分比，基於寬度。
• 避免循環依賴：區塊的高度通常由其內容決定，而內容取決於頂部和底部邊距。基於寬度的垂直邊距打破了這種循環依賴性，並允許邏輯頁面佈局。

範例

讓我們考慮一個具有高度的父容器的場景大小為100px，寬度為500px，子元素的margin-top: 50% 。上邊距百分比是相對於容器的寬度計算的，即 500 像素的 50%。因此，margin-top 將為 250px，即寬度的一半。

程式碼範例

以下CSS 示範了將margin-top 設定為50% 的效果使用基於寬度的容器：

<code class="css">.container {
  background: lightblue;
  padding: 10px;
  height: 100px;
  width: 500px;
}

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

在此範例中，子元素的margin-top 為250px，計算為容器500px 寬度的50%。

以上是為什麼CSS中的Margin-Top百分比是根據寬度計算的？的詳細內容。更多資訊請關注PHP中文網其他相關文章！