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中文网其他相关文章！