CSS 中 padding 和 margin 有什么区别？用实例讲清楚内边距

在 CSS 中，padding 和 margin 都能让元素之间出现空隙，但它们作用的位置不同，影响的背景、边框、布局计算也不同。把两者混为一谈，常会导致背景范围不对、间距忽大忽小，或者元素超出容器。

本文从盒模型出发，说明内边距和外边距分别做什么，何时使用，哪些规则容易踩坑，并提供可以复制运行的完整示例。

先记住核心区别

• padding 是内边距：内容与元素边框之间的空间，属于元素盒子内部。
• margin 是外边距：元素边框之外的空间，用来与其他元素或容器周围留出距离。
• 背景通常绘制在内容区、内边距区以及边框区（具体受 background-clip 影响），不会绘制到外边距区。
• padding 不能为负数；margin 可以为负数，也可以使用 auto。

简单记忆：想给一个盒子“里面加垫子”，通常用 padding；想让盒子“离周围远一点”，通常用 margin。

从盒模型理解内外边距

浏览器布局时，会把元素视为一个盒子。标准盒模型从内到外依次是：

1. 内容区（content）：文字、图片或子元素所在区域。
2. 内边距（padding）：内容与边框之间的空间。
3. 边框（border）：围绕内容和内边距绘制的边界。
4. 外边距（margin）：边框外侧的空间。

例如，一个元素设置了 width: 200px、左右各 20px 的内边距和左右各 2px 的边框，在默认的 box-sizing: content-box 下，其实际占用宽度为：

200px 内容宽度
+ 20px 左内边距 + 20px 右内边距
+ 2px 左边框 + 2px 右边框
= 244px

左右外边距不计入元素自身的边框盒宽度，但会参与元素在布局中的位置与空间分配。如果左右再各加 10px 外边距，它在普通文档流中的总水平占位通常是 264px。

下面的代码可以直接保存为 HTML 文件运行。为了让区别明显，容器用虚线表示，盒子用蓝色背景表示：

<!doctype html>
<html lang="zh-CN">
<meta charset="utf-8">
<title>padding 与 margin</title>
<style>
  .container {
    width: 360px;
    border: 2px dashed #555;
    background: #f4f4f4;
  }

  .box {
    width: 180px;
    padding: 20px;
    border: 4px solid #1d5fa7;
    margin: 16px;
    background: #b9dcff;
  }
</style>

<div class="container">
  <div class="box">蓝色区域包括内容、padding 和边框。</div>
</div>
</html>

蓝色背景延伸到内边距，但不会填满外边距；外边距呈现的是容器自己的背景。若把 padding 从 20px 调大，蓝色盒子内部空间变大，边框也会被推开；若把 margin 调大，盒子外侧与周围的距离变大。

什么时候使用 padding

1. 让文字或内容远离边框

按钮、卡片、输入框、提示框通常需要内边距，否则文字会紧贴边框。内边距属于组件内部空间，也能让背景色覆盖到文字周围。

.card {
  padding: 24px;
  border: 1px solid #d8dee8;
  background: #fff;
}

.button {
  padding: 10px 16px;
  border: 0;
  border-radius: 6px;
}

对按钮而言，增加内边距通常比给按钮设置固定宽高更灵活：文字变长时，按钮可以自然变宽；多语言文本也较不容易被挤出。

2. 扩大可点击区域

给链接或按钮增加内边距，可以扩大其盒子及常规点击区域，让触控操作更容易。需要注意，实际可点击范围仍取决于元素本身、覆盖它的其他元素、定位和事件处理等因素。仅仅扩大外边距不会把外边距自动变成同一个元素的可点击区域。

.nav-link {
  display: inline-block;
  padding: 12px 16px;
}

这适用于导航项、图标按钮等小目标。若元素周围不能被点击但又需要留空，应考虑使用外边距，而不是为了视觉间距盲目扩大可交互区域。

3. 为背景、边框留出内部空间

如果一块背景色要覆盖文字四周，或者边框需要和内容保持距离，应使用内边距。外边距位于背景绘制区域之外，不能实现同样的效果。

4. 创建容器内部的呼吸空间

页面主内容区、弹窗、卡片等，常通过容器的 padding 防止子元素贴着容器边缘。这样定义的空间属于容器本身，添加背景、边框时，边缘关系比较直观。

什么时候使用 margin

1. 控制相邻元素之间的间距

标题与段落、卡片与卡片之间需要分开时，通常使用外边距。它表达的是元素与外部布局的关系。

.article-title {
  margin-bottom: 16px;
}

.card + .card {
  margin-top: 20px;
}

2. 让块级元素水平居中

在具有可用剩余空间的块布局中，固定宽度（或有最大宽度）的块级元素可以用左右自动外边距居中：

.content {
  width: min(100% - 32px, 960px);
  margin-inline: auto;
}

margin-inline 是逻辑属性，表示行内方向两侧的外边距。在常见的横排书写模式下，它相当于左右外边距。若元素宽度占满容器，没有剩余空间可分配，左右自动外边距就不会产生可见的居中效果。Flexbox 和 Grid 子项中的 auto 外边距还可能用于吸收相应方向的剩余空间，但具体表现取决于布局模式。

3. 有意让元素靠近或越过周围内容

负外边距可以压缩元素之间的距离，甚至让边框盒部分覆盖相邻区域。例如标题要略微向上贴近图片时，可能会使用负的上外边距。这会改变布局占位或造成重叠，不适合拿来代替所有正常间距；使用前应确认小屏幕、内容变长时仍然可读且不会遮挡。

padding 的书写方式与参数规则

内边距属性可以分别设置四个方向，也可以使用简写：

.example {
  padding-top: 8px;
  padding-right: 12px;
  padding-bottom: 16px;
  padding-left: 12px;
}

简写属性最多接受四个值，顺序是上、右、下、左（顺时针）：

padding: 10px;                 /* 四边都是 10px */
padding: 10px 20px;            /* 上下 10px，左右 20px */
padding: 10px 20px 30px;       /* 上 10px，左右 20px，下 30px */
padding: 10px 20px 30px 40px;  /* 上、右、下、左 */

这里的单值、双值等规则同样适用于 margin 简写。若属性值数量不在一到四个之间，或值的语法不合法，该声明通常会被浏览器判为无效。

padding 的值可以是非负的长度或百分比，也可以是能计算出这些值的表达式，例如 calc()。常见长度单位包括 px、rem、em、vw 等。百分比内边距按包含块的尺寸计算；在常见的水平书写模式中，四个方向的百分比都相对于包含块的宽度（更准确地说是包含块的行内尺寸），而不是上、下方向改用高度。不要把它误认为“上下百分比按高度计算”。

.panel {
  padding: 1rem;
}

.responsive-panel {
  padding: 5%;
}

.compact-panel {
  padding: calc(1rem + 2vw);
}

百分比的解析和尺寸计算受布局上下文、书写模式与可用空间影响。如果需要精确控制纵向间距，通常直接使用明确长度或基于设计系统的尺寸变量，比依赖百分比更容易预测。

常见边界：两个外边距可能发生折叠

在普通块级布局中，垂直方向上相邻的部分外边距可能折叠。折叠不是简单相加：两个正外边距通常取较大值。例如前一个块有 margin-bottom: 24px，后一个块有 margin-top: 16px，折叠后两者之间可能是 24px，而不是 40px。

若一个为正、一个为负，折叠结果按相应规则计算；多个外边距中有正有负时，结果也不等于把所有绝对值相加。负外边距会让布局更难直观推断。水平外边距通常不以同样方式折叠。

外边距折叠只发生在符合条件的块级布局情形，并非所有元素、所有布局模式都会发生。Flexbox 或 Grid 项目等布局中的间距规则与普通块流不同。父子块之间也可能发生垂直外边距折叠，例如第一个子块的上外边距可能与父元素上外边距相遇。父元素设置边框或内边距等条件，常可阻止这种父子折叠。

如果设计要求间距稳定、可加和，可以在父容器上使用 display: flow-root 建立新的块格式化上下文，或改用 Flexbox/Grid 的 gap。也可以有意通过内边距和边框分隔边界，但不应为了“修复”折叠而随手添加不必要的视觉边框。

.stack {
  display: grid;
  gap: 16px;
}

在网格或弹性布局容器中，gap 表达的是项目之间的间距，通常比给每个项目设置成对的外边距更易维护。它不会给容器边缘自动增加间距；若容器边缘也需要留白，可再设置 padding。

盒模型与 box-sizing

默认的 box-sizing: content-box 下，width 和 height 指内容区尺寸，内边距和边框会额外加到实际盒子尺寸上。使用 box-sizing: border-box 时，声明的宽高包含内容、内边距和边框，内容区会相应缩小：

*,
*::before,
*::after {
  box-sizing: border-box;
}

全局采用 border-box 能让固定宽度组件更容易计算。但外边距不包含在 width 中，两种盒模型下都一样。不要误以为给元素设置了 width: 100%，再加内边距就一定不会溢出；若没有采用 border-box，内容宽度加内边距和边框可能超过父容器。

容易混淆的其他细节

padding 不能是负数，margin 可以

负的 padding 不符合 CSS 属性的取值要求，该声明无效；浏览器不会把它当成负内边距使用。margin 可以为负数，但负值可能使元素重叠或改变布局尺寸。能写出来不代表适合用于所有情况。

padding 不接受 auto

padding: auto 不是有效的内边距声明。外边距支持 auto，但它的实际作用取决于布局算法，并不表示“由浏览器随便加一个合适间距”。例如普通块级布局中的左右自动外边距可以分配剩余空间，而垂直方向的 margin-top: auto 通常不会像 Flexbox 中那样自动把元素推到底部。

行内元素的尺寸表现有差异

普通非替换行内元素（例如默认显示方式的 span）设置左右内外边距通常会生效；垂直方向的内边距可能绘制出来，但通常不会像块级盒那样撑开行盒高度。其垂直外边距也不会以普通块级元素的方式影响上下布局。需要让一段文本链接有清晰、可靠的盒子尺寸时，可以考虑使用 inline-block 或 Flexbox 等布局。

.tag {
  display: inline-block;
  padding: 4px 8px;
  margin: 2px;
}

逻辑属性比固定方向更适合多语言布局

padding-left、margin-right 等物理属性对应屏幕上的固定方向。若页面可能使用从右向左书写模式或不同书写模式，可使用逻辑属性：

.component {
  padding-block: 12px;
  padding-inline: 16px;
  margin-block-end: 24px;
}

padding-block 表示块方向两侧，padding-inline 表示行内方向两侧。它们的实际对应方向随书写模式变化，适合需要国际化的组件样式。

常见错误及排查方法

错误一：想让背景覆盖空白，却用了 margin

如果盒子四周留白要显示组件背景，请使用 padding。外边距区域不属于元素背景绘制区域。反过来，若只是希望组件与下一个组件保持距离，不要把这段距离塞进内部 padding，否则背景和边框也会被撑开。

错误二：用 margin 控制按钮内部文字位置

给按钮文字或图标添加外边距，容易让内部排布和按钮外部间距混在一起。组件内部布局优先用 padding，图标与文字之间可以用容器布局和 gap。按钮与其他控件之间的距离再由外层布局管理。

错误三：把相邻 margin 当成一定会相加

两个块上下相邻时，正外边距可能折叠；在 Flexbox 或 Grid 等上下文中，行为又可能不同。排查时先确认元素的 display、布局上下文以及是否存在外边距折叠，不要只把数值相加。

错误四：百分比 padding 按高度计算

常见水平书写模式下，垂直方向百分比内边距也基于包含块的宽度（行内尺寸）计算。想用百分比获得与父容器高度相关的内边距，不能直接按直觉写 padding-top: 10%。应依据目标改用明确单位、视口单位、布局容器或其他尺寸方案，并在目标浏览器和布局中验证。

错误五：固定宽度加 padding 后出现横向滚动条

检查 box-sizing。默认内容盒模型会把内边距和边框加到内容宽度之外；还应检查子元素最小宽度、长文本、图片宽度和外边距。不要一概使用 overflow: hidden 掩盖问题，因为这可能裁切内容或焦点轮廓。

错误六：靠负 margin 修正所有错位

负外边距适合少量、明确的布局设计，不是通用的对齐工具。反复叠加负值通常意味着组件边界、布局方式或尺寸计算需要重新检查。优先考虑 Grid、Flexbox、gap、对齐属性以及合理的容器结构。

参数限制与安全边界

CSS 规范为属性规定了取值类型和计算规则，但没有一个适用于所有属性、浏览器和设备的“最大安全像素值”。长度、百分比和 calc() 的结果要符合属性要求；超过浏览器实现可处理范围或遇到极端数值时，实际结果可能受实现和布局限制影响。工程上应使用合理尺寸，避免巨大值造成滚动范围异常、布局性能问题或内容难以访问。

无效声明一般会被忽略，已有的其他有效样式可能继续生效。因此，样式问题不能简单理解为“错误值会自动变成零”。使用 CSS 自定义属性、用户可配置值或动态拼接样式时，应在应用中限制可接受的输入，并注意单位和语法；不要把未经校验的用户字符串直接拼入 CSS。

padding 和 margin 只控制呈现与布局，不是权限或安全边界。它们不能阻止用户访问数据、点击隐藏控件、绕过服务端校验，也不能代替鉴权。使用 display: none、透明度或负外边距隐藏内容，也不应被当作保护敏感信息的手段；敏感数据应由服务端控制是否返回。

若将用户输入插入 HTML 或样式上下文，应按对应上下文进行安全处理，避免把输入直接当作标记或 CSS 代码执行。特别是动态生成 CSS 时，应使用受控的样式值或安全的 API，并在服务端进行权限校验。CSS 的视觉遮挡不构成可靠的安全防护。

选择口诀与完整示例

可以用三个问题快速判断：

1. 这段空间要不要显示元素自己的背景？要显示，通常用 padding。
2. 这段空间是组件内部布局还是组件与外部的距离？前者通常用 padding，后者通常用 margin 或容器的 gap。
3. 是否需要让块级内容居中、吸收剩余空间，或刻意产生重叠？这类需求通常涉及 margin，但要结合布局模式判断。

下面是一个更完整的可运行示例：卡片使用内边距安排内部内容，卡片列表使用 Grid 的 gap 处理项目间距，页面容器使用自动外边距居中。

<!doctype html>
<html lang="zh-CN">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>内边距与外边距示例</title>
<style>
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  body {
    margin: 0;
    font: 16px/1.6 system-ui, sans-serif;
    color: #1f2937;
    background: #f3f6fa;
  }

  .page {
    width: min(100% - 32px, 900px);
    margin-inline: auto;
    padding-block: 32px;
  }

  .cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
    gap: 16px;
  }

  .card {
    padding: 20px;
    border: 1px solid #d7deea;
    border-radius: 10px;
    background: white;
  }

  .card h2 {
    margin: 0 0 8px;
  }

  .card p {
    margin: 0;
  }

  .card a {
    display: inline-block;
    margin-top: 12px;
    padding: 8px 12px;
    border-radius: 6px;
    color: white;
    background: #245db0;
  }
</style>

<main class="page">
  <div class="cards">
    <article class="card">
      <h2>卡片一</h2>
      <p>卡片的 padding 让内容不贴边，gap 负责卡片之间的距离。</p>
      <a href="#one">查看详情</a>
    </article>
    <article class="card">
      <h2>卡片二</h2>
      <p>链接的 padding 扩大内部可点击区域，margin-top 与正文分开。</p>
      <a href="#two">查看详情</a>
    </article>
  </div>
</main>
</html>

在这个例子里，.page 的左右自动外边距使页面内容居中；卡片自身的 padding 保证内容与边框有距离；.cards 的 gap 控制卡片间距；链接的内边距则让按钮区域更宽松。每一种空间都有明确归属，后续调整样式时也更容易判断该改哪条规则。

总结

padding 是盒子内部的空间，会影响内容与边框的距离，并通常让背景覆盖范围扩大；margin 是盒子外部的空间，常用于元素之间的距离、块级元素居中以及特定的布局调整。默认盒模型下，内边距和边框会增加盒子占用尺寸，除非采用 box-sizing: border-box 来改变宽高的计算方式。

实际开发中，组件内部留白用内边距，组件之间的留白优先由外边距或父容器的 gap 管理；遇到异常时，再检查盒模型、百分比基准、布局模式和外边距折叠。理解这些边界，比记住“哪个属性更常用”更重要。