CSS 中的邊距與填滿：這些間距屬性有何不同？

理解差異：CSS 中的邊距與填充

在調整 CSS 中元素周圍的空間時，出現了兩個關鍵屬性：邊距和填充。儘管兩者都用於操縱間距，但它們表現出不同的行為和應用。

垂直邊距自動摺疊

根本差別在於垂直邊距的行為。雖然相鄰元素的邊距重疊，但填充不重疊。當一個內邊距為 1em 的元素後面跟著另一個內邊距為 1em 的元素時，內容之間的總垂直間距會變成 2em。另一方面，當使用 1em 邊距時，由於邊距重疊，垂直間距仍為 1em。無論上下文如何，此功能對於保持元素之間的間距一致特別有用。

包含在點擊區域和樣式中

填充被視為元素的一部分，從而擴展單擊區域並合併到背景顏色和圖像中。然而，邊距落在元素之外，不會影響這些方面。

視覺展示

為了說明差異，讓我們探討一個簡單的HTML 和CSS 範例：

<div class="box">
    <div>A</div>
    <div>B</div>
    <div>C</div>
</div>

<div class="box padding">
    <div>A</div>
    <div>B</div>
    <div>C</div>
</div>

<div class="box margin">
    <div>A</div>
    <div>B</div>
    <div>C</div>
</div>

div.box > div {
    height: 50px;
    width: 50px;
    border: 1px solid black;
    text-align: center;
}
div.padding > div {
    padding-top: 20px;
}
div.margin > div {
    margin-top: 20px;
}

如您所提供參見，帶內邊距的元素增加了垂直間距，而帶邊距的元素則保持不變1em 間隙。

以上是CSS 中的邊距與填滿：這些間距屬性有何不同？的詳細內容。更多資訊請關注PHP中文網其他相關文章！