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

CSS 中的 margin-top 百分比計算

計算 CSS 中的 margin-top 百分比需要理解其參考點。與直觀的假設不同，它不是根據父級的高度而是根據其寬度來計算的。

深入研究W3C 規範

W3C 規範明確指出，「百分比是計算出來的相對於生成的盒子的包含塊的寬度。」這對於margin-top和margin-bottom 都適用。

確保一致性並避免循環依賴

所有邊上基於百分比的邊距（margin-top，- right、-bottom、-left）提供佈局的一致性。水平和垂直邊距使用百分比可以避免邊距大小的差異。

此外，基於容器寬度的垂直邊距可以避免頁面佈局中的循環依賴。區塊高度取決於其內容，而內容高度需要包括頂部和底部邊距的計算。透過將垂直邊距錨定到容器寬度，這種依賴性被打破，從而實現有效的佈局。

程式碼範例

.container {<br>背景：淺藍色;<br> 內邊距：10px;<br>高度：100px ;<br> 寬度：500px;<br>}<p>p {<br> 顯示：塊；<br> 邊框：1px 純紅色； <br> margin-top: 50%;<br>}; <br></p>

執行時，margin-top 是相對於容器的500px 寬度進行測量的，從而產生250px 的邊距.

以上是CSS 中的 margin-top 百分比是如何計算的？的詳細內容。更多資訊請關注PHP中文網其他相關文章！