CSS: CSS 边距

最后更新：2026-10-13

CSS 中的边距分为两种：内边距（padding）和外边距（margin）。它们是控制元素"内部留白"和"外部间距"的关键属性。

边距属性速查表

本节涉及属性： padding margin

1. 内边距 padding

padding 是内容区域到边框之间的空间，相当于元素的"内留白"。

▶ 示例

(1) 可以分别设置四个方向

▶ 示例

(2) padding 简写规则

/* 一个值：四边相同 */
padding: 20px;

/* 两个值：上下 左右 */
padding: 10px 20px;

/* 三个值：上 左右 下 */
padding: 10px 20px 30px;

/* 四个值：上 右 下 左（顺时针） */
padding: 10px 20px 30px 40px;

(3) padding 的常用场景

▶ 示例

(4) padding 的注意事项

• padding 区域会显示元素的背景颜色和背景图像
• padding 会使元素"变大"（除非使用 box-sizing: border-box）
• 行内元素（如 <span>）的 padding 只在水平方向有效

2. 外边距 margin

margin 是元素边框外侧与其他元素之间的空间，相当于元素的"外交距"。

▶ 示例

(1) margin 简写规则

和 padding 完全一样：

margin: 20px;            /* 四边相同 */
margin: 10px 20px;       /* 上下 左右 */
margin: 10px 20px 30px;  /* 上 左右 下 */
margin: 10px 20px 30px 40px; /* 上 右 下 左 */

(2) margin 的常用场景

▶ 示例

(3) margin: auto 实现居中

margin: 0 auto 可以让块级元素在父容器中水平居中：

▶ 示例

3. 外边距合并（Margin Collapse）

这是 CSS 中一个重要的概念——垂直方向上相邻的两个外边距会合并为一个，取其中的较大值。

(1) 场景一：相邻兄弟元素

▶ 示例

(2) 场景二：父子元素

当父元素没有 padding、border 或内容时，子元素的 margin 会"穿透"到父元素外部：

▶ 示例

避免方法：

• 给父元素加 padding: 1px（或者任意正值）
• 给父元素加 border: 1px solid transparent
• 给父元素加 overflow: hidden
• 使用 flex 或 grid 布局

(3) 场景三：空元素

一个没有内容、padding、border 的块级元素，它的上下 margin 也会合并。

(4) 不会合并的情况

• 水平方向（左右 margin）不会合并
• flex 布局的子项不会合并
• 浮动元素不会合并
• 绝对定位元素不会合并

4. padding vs margin 的选择

一个简单判断方法：background 是否应该覆盖这个区域？ 如果应该，用 padding；如果不应该，用 margin。

本节涉及属性： padding margin

❓ 常见问题

📖 小节

• padding 和 margin 是 CSS 布局中最常用的两个间距属性
• padding 控制元素内部的留白，margin 控制元素外部的间距
• 理解它们的简写规则、以及外边距合并（Margin Collapse）这个"坑"，是写出可靠布局的必备知识
• 建议在项目开始时就全局设置 box-sizing: border-box，这样 padding 不会撑大元素，计算尺寸更方便

📝 作业

1. 创建一个"卡片组"页面，包含 3 张卡片，使用 margin 控制卡片之间的间距。
2. 创建一个导航栏，使用 padding 控制每个导航项内部的文字与边界的距离。
3. 演示"外边距合并"现象，并在代码中用至少两种方法解决它。
4. 使用 margin: 0 auto 让一个 800px 宽的容器在页面中水平居中。

Web-Tutorial 技术团队

由多位开发者共同维护的编程教程平台。每篇教程由对应领域的开发者编写和审核，确保内容准确可靠。如发现任何问题，欢迎向我们反馈。

关于我们