margin 不改变元素 content-box 尺寸；它是透明外层，只影响与其他元素间距，不参与宽高计算，但会触发外边距合并、在 flex/grid 中行为不同，且实际占位需用 getBoundingClientRect 判断。
margin 不会改变元素 content-box 的尺寸
直接说结论：margin 是盒模型最外层的透明区域，它不参与元素自身宽高的计算。设置 margin 后，element.offsetWidth（JS 中）或 width/height 声明值都不会变——它只影响该元素与其他元素之间的距离。
但要注意：视觉上“这个块看起来变大了”，其实是它占用了更多页面空间，不是它自己变大了。比如一个 div 设了 width: 200px; margin: 20px;，它的内容区仍是 200×任意高，但整个元素在文档流中会推开周围元素，占据 240×(高+40) 的总空间（左右各 +20，上下各 +20）。
margin 会触发外边距合并（margin collapse）
这是最容易让人误以为 “margin 改变了高度” 的原因。相邻块级元素的垂直 margin（margin-top 和 margin-bottom）会合并成一个，取其中较大的那个值，而不是相加。
- 父子元素间也可能发生：如果父元素没边框、没内边距、没清除浮动，且子元素有
margin-top，那这个 margin 会“穿透”到父元素外部 - 空块级元素（如只有
margin没内容、padding或border）的上下 margin 也会合并 -
解决方法包括：给父元素加
border: 1px solid transparent、padding: 0.1px，或触发 BFC（如overflow: hidden）
margin 在 flex / grid 布局中行为不同
在传统文档流中，margin 控制的是元素间的“排斥力”；但在 display: flex 或 display: grid 容器里，它还能起到对齐和留白作用，且不会触发外边距合并。
立即学习“前端免费学习笔记（深入）”；
-
margin: auto在 flex item 上可实现居中（水平/垂直都有效），这是普通流中做不到的 - grid item 的
margin不会与相邻 item 合并，可以安全用于间隔控制 - 但注意：flex 容器的
justify-content/align-items和margin: auto共存时，后者优先级更高
用 getComputedStyle 判断真实占用空间要小心
想查元素实际占位大小？别只看 offsetWidth——它包含 padding 和 border，但不包含 margin。而 getComputedStyle(el).marginBottom 返回的是字符串（如 "20px"），需手动解析。
更可靠的方式是用 el.getBoundingClientRect()，它返回的是相对于视口的绝对坐标，其中 width 和 height 是 content + padding + border，而 top/bottom 差值隐含了 margin 的影响（因为定位已包含 margin 推开的效果）。
const rect = el.getBoundingClientRect(); console.log(rect.width); // 不含 margin console.log(rect.bottom - rect.top); // 含 margin 影响后的实际高度跨度
外边距本身不增肥元素，但它悄悄改写了元素在页面里的“势力范围”。真正容易翻车的，从来不是 margin 写多少，而是忘了它会在父子间消失、在兄弟间缩水、在 flex 里突然听你的话——这些边界条件，比数值本身更值得盯紧。
