CSS 内外边距

理解 margin 和 padding 的区别 · 难度：入门 · +10XP

CSS 内外边距与间距控制

在 CSS 盒模型中，margin（外边距）和 padding（内边距）是控制元素间距的核心属性。理解它们之间的区别并能灵活应用，是掌握 CSS 布局的关键一步。

外边距 margin

margin 用于控制元素与其他元素之间的距离。margin 是透明的，不显示背景色，且相邻元素的 margin 会发生合并（塌陷）。

div {
  margin-top: 20px;
  margin-right: 15px;
  margin-bottom: 20px;
  margin-left: 15px;
}
/* 简写形式 */
div {
  margin: 20px 15px 20px 15px;  /* 上 右 下 左 */
}
div.two {
  margin: 20px 15px;  /* 上下 20px，左右 15px */
}
div.one {
  margin: 10px;  /* 四边都是 10px */
}
/* 水平居中 */
div.center {
  width: 300px;
  margin: 0 auto;  /* 上下 0，左右自动 = 居中 */
}

内边距 padding

padding 控制元素内容与边框之间的距离。padding 显示元素的背景色，与 margin 不同，padding 不会发生合并。

div {
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 10px;
  padding-left: 20px;
}
/* 简写形式 */
div {
  padding: 10px 20px;  /* 上下 10px，左右 20px */
}
.card {
  padding: 20px;
  background: #fff;
  border-radius: 8px;
}

margin 与 padding 的关键区别

特性	margin	padding
定义	元素外部的间距	内容与边框之间的间距
背景色	不显示（透明）	显示元素背景色
合并(塌陷)	相邻 margin 会合并	不会合并
auto 值	可用于水平居中	不能使用 auto
负值	可以使用负值	不能使用负值
点击区域	不属于可点击区域	属于可点击区域

margin 塌陷详解

当两个垂直相邻的元素都有 margin 时，它们之间的实际间距取两者中的最大值，而非相加。

.box1 { margin-bottom: 30px; }
.box2 { margin-top: 20px; }
/* 实际间距 = 30px（取最大值），而不是 50px */

实用间距技巧

/* 卡片列表间距（使用相邻选择器） */
.card + .card {
  margin-top: 16px;
}
/* 使用 gap 替代 margin（Flex/Grid 布局） */
.container {
  display: flex;
  gap: 20px;  /* 更优雅的间距方式 */
}
/* 重置默认样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

???? 练习

1. 创建两个色块，分别使用 margin 和 padding 观察其区别
2. 使用 margin: 0 auto 将一个固定宽度的 div 水平居中
3. 创建三个相邻的卡片，对比使用 margin 和使用 gap 设置间距的效果
4. 观察两个垂直排列元素之间的 margin 塌陷现象
5. 为页面写一个简单的 CSS Reset，清除所有默认 margin 和 padding