CSS 外边距与内边距

margin（外边距）和 padding（内边距）是控制元素间距的核心属性。理解它们的细微差别，是制作精确布局的关键。

padding — 内边距

padding 是内容与边框之间的空间。它属于元素内部，会纳入背景色的范围，会增加 click 区域。

css 
.card {
  padding: 24px;
  background: white;
  /* 白色背景会填充整个 padding 区域 */
}

分方向设置

css 
/* 四个方向独立 */
.element {
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 10px;
  padding-left: 20px;
}

简写规则

值个数对应方向规则
1 个值四边相同padding: 20px;
2 个值上下 / 左右padding: 10px 20px;
3 个值上 / 左右 / 下padding: 10px 20px 15px;
4 个值上 / 右 / 下 / 左padding: 10px 20px 15px 30px;

记忆顺序：从上开始，顺时针（Top → Right → Bottom → Left）。

margin — 外边距

margin 是元素与其他元素之间的空间。它位于元素外部的透明区域：

css 
/* 基本用法 */
p {
  margin-bottom: 1rem; /* 段落之间的间距 */
}

简写规则与 padding 完全一致。

居中技巧

设置左右 margin 为 auto，可以让固定宽度的块级元素水平居中：

css 
.container {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

/* 简写 */
.container {
  max-width: 800px;
  margin: 0 auto;
}

这是 CSS 中最常见的布局技巧之一。

margin 的负值

margin 可以为负数，将元素向反方向”拉近”：

css 
/* 重叠效果 */
.overlap {
  margin-top: -20px; /* 向上移动 20px */
}

padding 不能为负值——设置负值无效。只有 margin 支持负数。

margin 叠加

垂直方向相邻元素的 margin 会叠加（取最大值），而非相加（见 CSS 盒模型 中的详细说明）。

百分比值

margin 和 padding 的百分比值都是相对于包含块的宽度计算——即使设置的是上下方向：

css 
.parent {
  width: 500px;
}
.child {
  padding: 10%;    /* 上下左右都是 50px（500 的 10%） */
  margin-top: 5%;  /* 25px（500 的 5%） */
}
html 
<div class="parent">
  <div class="child">子元素 — padding 10% = 父宽 500px × 10%</div>
</div>

百分比不论方向都基于宽度，这是因为 CSS 中宽度是确定的（由父元素约束），高度则可能由内容撑开，无法提供稳定的百分比基准。

inline 元素的 margin/padding

行内元素（<span>、<a> 等）的 margin 和 padding 行为与块级元素不同：

  • 水平方向的 margin 和 padding 正常生效
  • 垂直方向的 margin 不会推开上下元素（浏览器忽略）
  • 垂直方向的 padding 视觉上会生效，但不影响行高和周围的元素位置
css 
span {
  padding: 10px;   /* 上下 padding 视觉存在，但不占空间 */
  margin: 10px;    /* 上下 margin 被忽略 */
}

要让行内元素的垂直 padding/margin 生效，需要将其设为 display: inline-block。

实用技巧

间距控制模式

css 
/* 堆叠卡片模式：用 margin-bottom 控制间距 */
.card + .card {
  margin-top: 1.5rem;
}

/* 列表项间距 */
li:not(:last-child) {
  margin-bottom: 0.75rem;
}

重置浏览器默认间距

css 
/* 常见的 CSS reset */
body, h1, h2, h3, h4, h5, h6, p, ul, ol {
  margin: 0;
  padding: 0;
}

浏览器会给很多元素添加默认的 margin 和 padding（如 <body> 有 8px margin，<ul> 有左 padding），重置它们是项目开发的第一步。