外边距合并导致 margin 为 0 仍有间距；负 margin 是合法位移手段；margin: auto 居中效果依赖布局上下文；移动端慎用 margin 缩小 touch 区域。
margin 为 0 却还有间距？检查是否触发了外边距合并（margin collapse）
两个垂直相邻的块级元素，即使都设了 margin: 0，也可能看起来有空隙——这不是 bug，是 CSS 规范定义的外边距合并行为。父元素和第一个/最后一个子元素之间、相邻兄弟块之间，都会自动合并 margin，取其中较大者，而不是相加。
实操建议：
- 用浏览器开发者工具选中元素，看 computed 样式里的
margin-top和margin-bottom是否被“覆盖”或“消失” - 想禁用合并？给父容器加
overflow: hidden、padding: 0.1px或border: 1px solid transparent - Flex 或 Grid 布局下默认不发生外边距合并，这是切换布局的合理理由之一
负 margin 不是 hack，是合法且可控的位移手段
负 margin（如 margin-left: -20px）在 CSS 中完全合法，常用于微调对齐、实现文字缩进、卡片重叠等场景。它不会破坏文档流，只是让元素视觉上偏移，后续元素仍按原位置布局。
常见错误现象：
立即学习“前端免费学习笔记（深入）”；
- 用负
margin-top拉高标题，结果下面段落没跟着上移——因为段落定位仍基于原始文档流 - 在浮动布局中滥用负 margin 导致换行错乱，尤其当容器宽度不足时
- 响应式断点里没重置负 margin，小屏下内容被切掉
性能影响极小，但可读性差；建议只用于局部微调，避免在组件公共样式中透出负值。
margin: auto 在不同上下文中的行为差异
margin: auto 的效果高度依赖 display 类型和父容器状态。它不是万能居中开关，也不是所有方向都生效。
关键区别：
- 块级元素：
margin: auto水平居中（需有明确 width），垂直方向无效 - 绝对定位元素：
top/bottom/left/right配合margin: auto可实现真正居中（需四值全设） - Flex 子项：
margin: auto会沿主轴/交叉轴“吸走”剩余空间，常用来推到边缘或单独居中某一项 - Grid 子项同理，但更推荐用
justify-self/align-self
别指望 margin: auto 在 inline 元素或 table-cell 上起作用——它根本不会解析。
移动端 touch 区域太小？慎用 margin 挤占可点击空间
给按钮加 margin 看似在控制间距，但 iOS Safari 和部分安卓浏览器会把 margin 区域算作“非激活区”，导致手指点在 margin 上没反应。这不是 bug，是浏览器对 touch target 的主动保护策略。
更稳妥的做法：
- 用
padding扩展点击区域，再用背景色或边框视觉上“收窄”内容区 - 若必须用 margin，请确保 touch target（含 padding）≥ 44×44px，符合 WCAG 推荐
- 避免对
<a></a>或<button></button>直接设负 margin，可能裁剪可点击热区
外边距本身不参与渲染，但它悄悄改写了元素的几何边界和交互边界——这点最容易被忽略。
