外边距合并、margin: auto居中条件、负margin影响布局流是margin三大易错点；垂直外边距会合并，auto居中需块级元素且有明确宽度，负margin会破坏文档流。
margin值写多少才不会让元素重叠
直接看效果：如果两个相邻块级元素都设了 margin-bottom: 20px 和 margin-top: 20px，实际间距不是40px，而是20px——因为垂直方向的外边距会合并（margin collapse）。这是最常被忽略的“为什么没变大”的原因。
- 只对块级元素、普通文档流中的元素生效；
display: inline元素的margin-top/margin-bottom无效 - 父子元素间也可能发生外边距合并：父容器没边框、内边距、内容分隔时，子元素的上/下
margin会“透出”到父级外部 - 想避免合并？加个
border: 1px solid transparent、padding: 0.1px或overflow: hidden到父容器就行
margin: auto 在什么情况下能居中
margin: auto 能水平居中，但有两个硬性前提：元素必须是块级（或 display: block）、且宽度不能是 auto（即得写死 width 或 max-width）。它对行内元素、flex子项、绝对定位元素无效。
- 水平居中：用
margin: 0 auto，前提是元素有明确宽度 - 垂直居中？单靠
margin: auto不行——除非父容器是display: flex，此时子元素设margin: auto才真能上下左右都居中 - 注意：IE8及更早版本不支持块级元素的
margin: auto垂直居中（其实本来也不支持）
负margin怎么用才安全
负 margin 是少数能“拉回”元素位置的手段，但容易破坏布局流。它不是bug，是规范允许的行为，关键在控制影响范围。
- 常见用途：实现等高列、微调图标位置、取消列表默认缩进（
margin-left: -40px） - 风险点：负
margin可能让元素视觉上覆盖兄弟元素，但事件捕获、可访问性仍按原始位置计算 - 替代建议：优先考虑
transform: translateX()做视觉偏移——不影响文档流，也不干扰点击区域 - 慎用负
margin-bottom：可能引发后续元素向上塌陷，尤其在响应式断点切换时表现不稳定
margin和padding混用时谁该负责留空
留白责任要分清：margin 管元素之间的距离，padding 管元素自身内容与边框的距离。混淆会导致组件复用困难、主题切换出错。
立即学习“前端免费学习笔记（深入）”；
- 按钮内部文字离边框的距离 → 用
padding - 按钮和旁边输入框的间隔 → 用按钮的
margin-right或输入框的margin-left（选一边，别两边都设） - 组件库设计时，对外暴露的间距接口应统一用
margin（比如spacingprop），内部用padding控制呼吸感 - 用 CSS 自定义属性时，别把
--gap同时塞给margin和padding，语义一乱，后面人改起来就懵
外边距看着简单，但 margin collapse、负值影响流、auto 居中的隐含条件，这三个地方只要漏掉一个，布局就会突然“不对劲”。调试时先问一句：这个 margin 是在推别人，还是在拉自己？
