為什麼CSS 邊距和內邊距是相對於寬度計算的
在CSS 領域，出現了一個有趣的怪癖：邊距和內邊距總是相對於包含區塊的寬度計算。這種神祕的設計決策與直覺的預期背道而馳，引發了一個問題：為什麼？
CSS 盒模型規範指出“[margin] 百分比是根據生成的盒包含塊的寬度計算的。”這種不一致延伸到“margin-top”和“margin-bottom”，如果包含塊的寬度取決於相關元素，則可能會渲染佈局未定義。
那為什麼會採取這種非常規的方法呢？雖然沒有明確的答案，但毫無根據的猜想表明，關鍵在於元素高度的確定。
元素高度通常由其子元素的高度定義。如果父元素有一個 padding-top （相對於父元素的高度），它將影響父元素的整體高度。然而，由於子級的高度依賴父級，因此會出現循環依賴。
這種依賴問題超出了直接包含的情況（偏移父級 === 父級）。葉元素（沒有子元素的子元素）的高度會影響其上方的所有元素。因此，這種設計選擇確保了一致性並防止潛在的高度計算錯誤。
以上是為什麼 CSS 邊距和填充是相對於寬度計算的？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
