CSS 边距及填充

边距 (Margin) 和填充 (Padding) 是 CSS 盒子模型中用于控制元素周围空间的两个核心属性。理解它们的区别和用法对于创建精确的布局至关重要。

Padding (填充)

Padding 是指元素 内容 (Content) 与其边框 (Border) 之间 的空间。可以把它想象成是元素内部的“衬垫”。

• padding 区域会继承元素的背景颜色或背景图片。
• 增加 padding 会使元素在视觉上变大。

CSS 提供了多个 padding 属性：

• padding-top
• padding-right
• padding-bottom
• padding-left

div {
  padding-top: 50px;
  padding-right: 30px;
  padding-bottom: 50px;
  padding-left: 80px;
}

padding 简写属性

使用 padding 简写属性可以更高效地设置填充。根据提供值的数量，其作用不同：

• 四个值: padding: 25px 50px 75px 100px; (上 右 下 左)
• 三个值: padding: 25px 50px 75px; (上 水平(左右) 下)
• 两个值: padding: 25px 50px; (垂直(上下) 水平(左右))
• 一个值: padding: 25px; (所有四个方向)

Margin (边距)

Margin 是指元素 边框 (Border) 以外 的空间。它用于控制元素与相邻元素之间的距离。

• margin 区域总是完全透明的。
• 增加 margin 会将元素推离其他元素。

与 padding 类似，CSS 也提供了 margin-top, margin-right, margin-bottom, margin-left 以及 margin 简写属性，其用法与 padding 完全相同。

div {
  margin-top: 100px;
  margin-bottom: 100px;
  margin-right: 150px;
  margin-left: 80px;
}

/* 使用简写 */
div.another {
    margin: 25px 50px;
}

margin: auto;

一个非常常见的技巧是使用 margin: auto; 来水平居中一个块级元素。要使其生效，该元素必须具有一个明确的 width。

div.center {
  width: 70%;
  margin: auto;
  border: 1px solid red;
}

这会使浏览器自动计算左右外边距，使其相等，从而实现水平居中。

外边距折叠 (Margin Collapse)

这是一个重要的、有时会引起困惑的概念。当垂直相邻的两个块级元素的 margin 相遇时，它们会合并（折叠）成一个单一的 margin。合并后的 margin 高度等于两个 margin 中较大的那个值。

<div style="margin-bottom: 20px;">...</div>
<div style="margin-top: 30px;">...</div>

在上面的例子中，两个 div 之间的垂直间距将是 30px，而不是 50px (20px + 30px)。

注意：外边距折叠只发生在垂直方向，水平方向的 margin 不会折叠。