根本原因是外边距折叠、空白字符间隙或继承干扰；应优先用gap管理Flex/Grid间距，传统布局需防折叠并统一单侧margin。
多个盒子间距不一致，根本原因通常不是 margin 或 padding 没“统一”，而是它们在不同上下文里发生了叠加、折叠或继承干扰。直接暴力设成相同值反而会让布局更乱。
为什么设了相同的 margin 盒子间距还是不一致
常见于垂直方向的块级元素（如 <div>、<p>），因为浏览器默认会触发 外边距折叠（margin collapse）：相邻兄弟元素的垂直 margin 会取较大值，而不是相加。
- 两个
div分别设margin-bottom: 20px和margin-top: 15px，实际间距是20px，不是35px - 父容器没设
border或padding，子元素的margin-top会“冒泡”到父容器顶部，造成意外交错 -
display: inline-block元素间存在空白字符（换行/空格），会渲染出约4px的间隙，和margin无关
用 gap 替代 margin 管理容器内子项间距
如果盒子都在同一个父容器里（尤其是 Flex 或 Grid 布局），优先用 gap —— 它不折叠、不继承、不触发重排，语义清晰且可控。
.container {
display: flex;
flex-wrap: wrap;
gap: 16px; /* 所有子项之间统一 16px 间距，包括行与行 */
}
<p>.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px; /<em> 列间距和行间距都为 12px </em>/
}-
gap在 Flex 中兼容性较好（Chrome 84+、Firefox 63+、Safari 14.1+），旧版可用row-gap/column-gap单独控制 - 不要对
gap容器内的子元素再设垂直margin，否则容易叠加出意外高度 -
gap不适用于非 Flex/Grid 容器（比如普通div堆叠），此时仍需处理margin折叠
彻底关闭 margin 折叠的实用方案
当必须用传统块流布局时，避免折叠最稳妥的方式是：让元素脱离常规文档流的“折叠上下文”。
立即学习“前端免费学习笔记（深入）”；
- 给父容器设
padding或border（哪怕border: 1px solid transparent），可阻止子元素margin外溢 - 给子元素设
display: inline-block并配合vertical-align: top，但要注意 HTML 中的空白符问题 - 统一只用单侧
margin：例如所有盒子只设margin-bottom，最后一个元素用:last-child { margin-bottom: 0; } - 用
margin的负值抵消折叠（不推荐，可读性差）：margin-bottom: -10px+margin-top: 20px→ 实际 20px，但难维护
padding 统一但视觉不对齐？检查盒模型和字体基线
即使 padding 值完全一样，盒子内容（尤其文字）也可能因行高、字体度量、垂直对齐方式导致视觉错位。
- 确保使用
box-sizing: border-box，否则width+padding会超出预期尺寸 - 文字容器若含
line-height，建议设为无单位数值（如line-height: 1.5），避免继承放大 -
vertical-align: top对inline-block或图片旁的文字很关键；Flex/Grid 容器中用align-items: flex-start - 用浏览器开发者工具的“Layout”面板查看实际
content、padding、border区域，别只信代码里的数字
真正统一间距的关键，不是把所有 margin 和 padding 设成一样数字，而是明确你用的是哪种布局机制，然后选择匹配它的控制方式。Flex/Grid 下优先 gap，传统流式下重点防折叠和对齐源，否则调来调去只是在补洞。
