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 看得最清楚
写个简单测试就能一眼分清：
<div style="background: gold; border: 2px dashed red;"> 内容 </div> <p><div style="background: gold; border: 2px dashed red; padding: 20px;"> 内容 </div></p><p><div style="background: gold; border: 2px dashed red; margin: 20px;"> 内容 </div>
观察三者差异：
第一个：金底+红虚线紧贴文字
第二个：金底扩大了，虚线往外移，文字离边更远（padding 起效）
第三个：金底和虚线范围不变，但整个盒子和页面边缘/其他元素之间多了 20px 透明空隙（margin 起效）
真正容易被忽略的，不是 margin 是否影响大小，而是它引发的塌陷、auto 居中行为、负值重叠这些“副作用”——它们不改变尺寸，却彻底改变布局结果。
