17370845950

margin 不影响元素本身大小，只影响它在页面中的位置关系；它位于边框外侧，不计入 content+padding+border 的尺寸，也不参与 getBoundingClientRect() 的宽高计算。

margin 不影响元素本身大小，只影响它在页面中的位置关系

这是最常被误解的一点：很多人看到两个 div 之间空了一大截

，就以为是上面那个 div “变高了”，其实只是它的 margin-bottom 把下面的元素推远了，它自己的 width 和 height（包括 content + padding + border）完全没变。

• 元素“本身大小”指盒模型中 content + padding + border 占据的空间（即 getBoundingClientRect() 的 width/height 值）
• margin 在边框外侧，不属于该元素的渲染区域，浏览器计算布局时不会把它计入元素尺寸
• 你可以用开发者工具选中元素 → 查看「Computed」面板 → 对比 width/height 和 border-box size，会发现 margin 值不参与其中

为什么改 margin 后父容器高度却变了？——常见错觉来源

这不是 margin 影响了子元素大小，而是它触发了父容器的「包含块行为」或「BFC 边界变化」。典型场景：

• 子元素设了 margin-top，但父容器没有设置 border、padding 或 overflow，此时会发生 margin 塌陷（margin collapsing）：子元素的上 margin 直接“透出”到父容器顶部，导致父容器看起来被撑高了
• 父容器是普通文档流中的块级元素，且未形成 BFC，它对内部 margin 的“包裹”能力很弱
• 解决方法不是删 margin，而是让父容器“兜住”它：加 padding: 1px、border: 1px solid transparent，或设 overflow: hidden

对比 padding：它确实会让元素变大（默认 box-sizing 下）

同样一个 div，设 width: 200px：

.box {
  width: 200px;
  padding: 20px; /* ← 左右各+20px */
  border: 5px solid #000;
}

它的实际总宽度是 200 + 20×2 + 5×2 = 250px；而如果把 padding 换成 margin: 20px，它的宽度仍是 200px（内容区），加上 border 后是 210px，margin 完全不参与这个计算。

• padding 改变的是元素“内部结构”，背景色/图会延伸进去
• margin 改变的是元素“外部关系”，永远透明，也不受 border 包裹
• 两者都支持负值，但语义完全不同：padding 设负值无效；margin 设负值可实现重叠、拉近等布局技巧

快速验证：用 background 和 border 看得最清楚

写个简单测试就能一眼分清：

  内容


内容

内容

观察三者差异：
第一个：金底+红虚线紧贴文字
第二个：金底扩大了，虚线往外移，文字离边更远（padding 起效）
第三个：金底和虚线范围不变，但整个盒子和页面边缘/其他元素之间多了 20px 透明空隙（margin 起效）

真正容易被忽略的，不是 margin 是否影响大小，而是它引发的塌陷、auto 居中行为、负值重叠这些“副作用”——它们不改变尺寸，却彻底改变布局结果。