margin触发外边距合并，相邻块级元素垂直margin取较大值而非相加；父与子间可能塌陷；可用padding/border隔离；负margin用于微调对齐；margin:auto居中效果依赖上下文；移动端推荐rem单位。
margin 会触发外边距合并（margin collapse）
相邻块级元素的垂直 margin-top 和 margin-bottom 会合并成一个，取其中较大者，而不是相加。这常导致“明明设了 20px，结果元素间只隔了 10px”这类问题。
- 只发生在普通文档流中的块级盒之间（
display: block），不适用于 flex / grid 子项、浮动元素或绝对定位元素 - 父元素和第一个/最后一个子元素之间也可能发生塌陷：若父元素没边框、内边距、内容或清除浮动，且子元素有
margin-top，该 margin 会“冒”到父元素外 - 解决塌陷常用方式：
padding-top: 1px或border-top: 1px solid transparent给父元素加“隔离层”
用负 margin 实现非标准对齐（比如文字与图标垂直居中）
当行内元素（如 ）和图标（）高度不一致时，单纯靠 vertical-align 往往不够精确，这时可对图标加负 margin-top 微调。
.icon {
margin-top: -2px; /* 向上拉 2px，匹配文字基线 */
display: inline-block;
vertical-align: middle;
}- 负 margin 不会破坏文档流，只是视觉偏移；但要注意它可能覆盖其他元素（无层叠上下文时）
- 配合
vertical-align: middle使用更可靠，因为middle是相对于父元素 x-height 对齐，不是绝对居中 - 避免在 flex 容器中滥用负 margin——flex 自身的
align-items和justify-content更可控
margin: auto 在不同上下文中的行为差异
margin: auto 的效果完全取决于容器的格式化上下文，不是“自动居中”的万能解。
- 块级元素在块级容器中：
margin-left: auto; margin-right: auto可水平居中（前提是宽度固定或max-width限制） - flex 容器子项：
margin: auto会沿主轴和交叉轴同时居中（相当于margin: auto auto），这是最简洁的居中方式之一 - grid 容器子项：同样支持
margin: auto居中，且优先级高于justify-self/align-self - 绝对定位元素中：
left: 0; right: 0; margin: auto才能水平居中（仅靠margin: auto无效）
移动端适配中 margin 单位选 rem 还是 em？
两者都相对，但参考基准不同：em 相对于父元素字体大小，rem 相对于根元素（html）字体大小。对 margin 来说，rem 更稳定。
立即学习“前端免费学习笔记（深入）”；
- 用
em写 margin 容易产生嵌套放大：如果父元素font-size: 1.2em，子元素再设margin: 1em，实际值会是 1.2 × 基准值 -
rem避免了这种链式依赖，适合统一控制间距比例，尤其在响应式中配合html { font-size: calc(16px + 0.2vw); }动态缩放 - 注意：Safari 旧版本对
rem在margin中的支持略弱，若需兼容 iOS 9 以下，可用pxfallback 或 JS 补丁
真正容易被忽略的是：margin 的计算发生在布局阶段，但它不参与盒尺寸计算（width/height 不包含 margin），而浏览器渲染时又可能因 subpixel 渲染导致小数 margin 被舍入——所以 0.5px 的 margin 在某些设备上根本不可见。
