CSS 中的 margin-top 百分比計算
將 margin-top 百分比應用於元素時,必須了解計算方式執行。與普遍的看法相反,margin-top 百分比是根據包含區塊的寬度而不是高度來確定的。
W3C 規範解釋:
根據W3C 規範,「百分比是根據產生的框包含區塊的寬度計算的。」此規則適用於“margin-top”和“margin-bottom”。
將垂直邊距基於容器寬度的原因:
範例:
考慮以下程式碼:
<code class="css">.container { width: 500px; height: 100px; } p { margin-top: 50%; }</code>
「邊距」 'p' 元素的-top' 50%將根據'.container' 的寬度(即500px)計算。因此,實際應用的 margin-top 將為 250px(500px 的 50%)。這與常見的假設不同,即 100px(200px 的 50%,「.container」的高度)。
結論:
透過了解邊距如何- 計算頂部百分比,可以有效控制元素定位並避免意外的佈局問題。請記住,垂直邊距是基於包含區塊的寬度,以保持大小一致並防止 CSS 佈局中的循環依賴。
以上是為什麼 CSS 中的 Margin-Top 百分比是根據容器寬度計算的?的詳細內容。更多資訊請關注PHP中文網其他相關文章!