CSS 中的 margin-top 百分比計算

當對元素應用 margin-top 百分比時，必須了解計算方式執行。與普遍的看法相反，邊距頂部百分比是根據包含塊的寬度而不是其高度來確定的。

W3C 規範解釋：

1. 根據W3C 規範，“百分比是根據生成的框包含塊的寬度計算的。”此規則適用於“margin-top”和“margin-bottom”。
將垂直邊距基於容器寬度的原因：

塊的所有四個邊的百分比邊距應保持相等，如“邊距”簡寫屬性所定義。基於容器寬度的垂直邊距可保持一致的邊距大小。

計算塊高度通常依賴於了解頂部和底部邊距。然而，如果這些邊距取決於區塊高度，則在佈局計算期間會出現循環依賴性。基於容器寬度的垂直邊距可以解決此問題。

.container {
  width: 500px;
  height: 100px;
}

p {
  margin-top: 50%;
}

考慮以下程式碼：

透過了解邊距如何- 計算頂部百分比，可以有效控制元素定位並避免意外的佈局問題。請記住，垂直邊距是基於包含區塊的寬度，以保持大小一致並防止 CSS 佈局中的循環依賴。