应优先用父容器的gap（Flex/Grid）或单侧margin避免外边距合并；若需绕过合并可加overflow:hidden等hack，但换布局更干净；padding适用于预留内容内边距而非兄弟元素分隔。
用 margin 或 gap 隔开两个 div
两个 div 紧贴在一起，本质是它们的盒模型边界没留空隙。最直接的办法是给其中一个加外边距，或者把它们包进一个弹性容器里用间隙控制。
常见错误现象：div 看起来“粘”在一起，检查元素发现 margin 为 0，或父容器用了 display: flex 却没设 gap。
- 如果只是简单并列，给第二个
div加margin-top: 12px（数值按需调整） - 如果父容器是
display: flex或display: grid，优先用gap—— 它不会触发外边距合并，更可控 - 避免同时给两个相邻
div都设margin-bottom和margin-top，容易因外边距合并（margin collapse）导致间距翻倍或失效
margin-collapse 导致间距不生效怎么办
块级元素垂直方向的相邻外边距会合并，这是 CSS 规范行为，不是 bug。比如第一个 div 的 margin-bottom: 20px，第二个的 margin-top: 10px，最终只显示 20px，不是 30px。
- 确认是否真需要两个方向都设 margin —— 通常只设一个方向就够了（如统一用
margin-bottom） - 想彻底绕过合并？给父容器加
overflow: hidden、padding: 0.1px或border: 1px solid transparent，能阻止合并，但属于 hack，慎用 - Flex/Grid 布局天然不发生 margin collapse，所以换布局方式反而是更干净的解法
用 flex 布局时 gap 不起作用的几个原因
gap 只在 display: flex（且为 row 方向）或 grid 容器下有效，很多人写了却没反应，其实是前提条件没满足。
立即学习“前端免费学习笔记（深入）”；
- 确保父容器设置了
display: flex，且子元素确实是直接子节点（没有中间 wrapper） - IE 不支持
gap，如果要兼容，得回退到margin方案 -
flex-direction: column时，gap控制的是垂直间距；row下才是水平间距，别设反了 - 某些旧版 Safari 对
gap支持不全，可加-webkit-gap前缀保底
什么时候该用 padding 而不是 margin
如果你的目标不是“两个 div 之间留空”，而是“让内容离容器边缘有呼吸感”，那真正该动的是父容器的 padding，而不是子 div 的 margin。
- 当两个
div共享同一个背景色/边框，靠margin撑开会露出底层颜色，这时用父容器padding更稳妥 -
padding不会塌陷，也不受文档流位置影响，适合做固定内边距 - 但注意：
padding会增大父容器尺寸（除非用了box-sizing: border-box），而margin不会
