css margin 和 padding 有什么区别_外边距与内边距属性详解_网络技术

发布时间 - 2026-01-25 00:00:00 点击率：次

padding是内容到边框的距离，影响背景和自身尺寸；margin是边框到邻居的距离，透明且不撑大自身。判断依据：留白需背景则用padding，需透明间隙则用margin。

当你给一个 div 加了 background-color 和 padding，那块留白是“有颜色的”——它属于元素内部，背景会自然铺满。比如：

div {
  width: 100px;
  padding: 15px;
  background: #ffeb3b;
  border: 2px solid #333;
}

此时内容区宽高仍是 100px，但整个盒子实际占宽是 100 + 15×2 + 2×2 = 134px（默认 box-sizing: content-box）。这容易导致父容器溢出或响应式错位。

margin 永远是“空的”：没有背景、不继承父级样式、不会让 width 或 height 计算变大。它只决定这个盒子“站哪儿”、“离别人多远”。

典型误操作：两个 p 标签分别设 margin-top: 20px 和 margin-bottom: 20px，结果垂直间距只有 20px——因为块级元素上下 margin 会合并（collapse），取较大值。

这是最快速、最不容易出错的判断方式：

例如卡片列表：每张卡有自己的阴影和背景，卡与卡之间要留空——这个空必须透明，否则背景会连成一片。这时用 margin-bottom: 16px；而卡片内部标题和正文之间要呼吸感？那是 padding 的活儿。

默认盒模型下，padding 和 border 都会额外增加元素尺寸，导致宽度计算混乱。全局重置可大幅降低出错率：

* {
  box-sizing: border-box;
}

之后再写 width: 200px; pad

ding: 16px;，元素总宽还是 200px，padding 从内容区里“挤”出来，而不是往外“撑”。但注意：margin 始终不受 box-sizing 影响——它永远在盒子外面。

真正难的不是记定义，而是面对一个具体布局时，下意识去想：“这块空白，是我盒子的一部分，还是我跟别人之间的空隙？”——答案决定了你是敲 padding 还是 margin。