元素重叠主因是父容器塌陷、浮动未清除或margin合并，而非单纯缺间距；如相邻p元素的垂直margin会合并为20px而非40px，需用border/padding阻断合并或改用flex/grid布局。
元素重叠是因为 margin 和 padding 没有被正确区分
很多人看到两个 div 紧贴着甚至“压在一起”，第一反应是“加个 margin 就行”，结果发现加了没用，或者加了反而更乱。根本原因是没理清：重叠往往发生在**父容器高度塌陷**、**浮动未清除**、或**margin 合并（collapsing margins）** 这些底层机制上，而不是单纯“没加间距”。
比如两个相邻的 p 元素，各自设了 margin-top: 20px，实际垂直间距不是 40px，而是 20px——这就是 margin 合并。它只发生在**块级元素的垂直方向、相邻且无 border/padding 分隔**时。
- 用
padding在父容器内部“撑开”子元素间距，不会合并，适合控制内容与边框的距离 - 用
margin控制元素自身与其他兄弟/父容器的外部距离，但要警惕合并行为 - 想彻底避免垂直 margin 合并？给父容器加
border: 1px solid transparent或padding: 0.1px（不显眼但有效）
浮动元素导致的重叠必须清除，不能只靠 margin
如果一个 div 设了 float: left，而后续兄弟元素没清除浮动，就会“爬到”浮动元素旁边，看起来像重叠，其实是文档流丢失。这时候加再多 margin 都没用，因为后者仍处于普通流中，而浮动元素已脱离流。
- 优先用
display: flex或display: grid替代浮动布局，天然规避该问题 - 若必须用浮动，在最后一个浮动兄弟后加一个带
clear: both的空div，或对父容器使用overflow: hidden（注意可能影响子元素溢出裁剪） -
margin对浮动元素本身有效，但它只影响该浮动元素相对于其“原始位置”的偏移，不影响后续非浮动元素的定位逻辑
inline 元素的 vertical-align 影响视觉重叠感
多个 span 或 img 并排时，即使写了 margin-right，也可能因默认 vertical-align: baseline 导致底部不对齐，产生“错位重叠”的错觉。这不是盒模型塌陷，而是基线对齐造成的视觉偏差。
立即学习“前端免费学习笔记（深入）”；
- 统一设
vertical-align: top或vertical-align: middle可快速对齐 -
img默认是 inline 元素，下方会留出 4px 左右空白（为字母降部预留），加display: block或vertical-align: bottom即可消除 - 不要试图用负
margin-bottom去“抵消”这个空白，容易在不同字体/字号下失效
flex 容器里 margin 不会合并，但 align-items 可能造成“挤在一起”
在 display: flex 容器中，子元素的垂直 margin 不再合并，这是优势。但若设了 align-items: stretch（默认值），而子元素又没设高度，它们会拉伸填满容器高度，加上 margin 是盒外距，可能让内容区域被压缩，看起来像“重叠”或“挤压”。
- 检查是否误用了
align-items: stretch，改用align-items: flex-start更可控 - flex 子项的
margin可以设为auto实现自动均分间距（如margin: 0 auto居中，margin-right: auto推向左侧） - 避免在 flex 子项上同时设
height和margin冲突；优先用gap（如gap: 12px）控制间隙，语义清晰且不干扰盒模型计算
真正难处理的重叠，往往不是“没加 margin”，而是没意识到当前布局模式（block/float/flex/grid）对盒模型各属性的实际解释规则不同。多看 computed styles，少凭感觉调数值。
