外边距折叠导致相邻块级元素的 margin-bottom 和 margin-top 合并为较大值而非相加；解决方法包括打破折叠条件、统一使用 margin-bottom、改用 padding 或 css 自定义属性，以及在 flex/grid 中优先使用 gap。
margin-bottom 和 margin-top 同时设置会折叠
两个相邻块级元素分别设 margin-bottom: 20px 和 margin-top: 20px，实际间距不是 40px，而是 20px——这是 CSS 的外边距折叠（margin collapse）行为。常见于 <h2></h2>、<p></p>、<div> 等默认 display 为 <code>block 的元素之间。
解决思路不是“加更多 margin”，而是打破折叠条件：
- 给其中一个元素设置
overflow: hidden、display: flex或float: left（任一即可） - 统一只用
margin-bottom（推荐），所有垂直间距由下方元素承担 - 改用
padding（如父容器设padding-bottom: 20px），padding 不折叠
用 CSS 自定义属性统一控制留白基准
硬编码多个 margin-bottom: 16px 容易不一致，也难调整。用 CSS 自定义属性定义一套间距阶梯更可控：
:root {
--space-xs: 4px;
--space-sm: 8px;
--space-md: 16px;
--space-lg: 24px;
--space-xl: 32px;
}
.section-title {
margin-bottom: var(--space-md);
}
.content-paragraph {
margin-bottom: var(--space-sm);
}
.cta-button {
margin-top: var(--space-lg);
}
这样改间距只需调一次 :root，且语义清晰——--space-md 比 16px 更容易理解用途。
立即学习“前端免费学习笔记（深入）”；
flex 或 grid 布局下 spacing 要用 gap 而非 margin
在 display: flex 或 display: grid 容器中，子元素间留白优先用 gap，而不是给每个子项加 margin：
-
gap不受外边距折叠影响，值就是真实间距 - 响应式友好：
row-gap和column-gap可独立控制 - 避免“首项多上边距、末项多半下边距”的边界问题
例如垂直堆叠卡片：
.card-list {
display: flex;
flex-direction: column;
gap: var(--space-md);
}
重置默认样式后仍不均？检查 line-height 和 font-size 影响
即使 margin/padding 一致，视觉留白也可能因行高或字号差异显得不均。比如 <h3></h3> 默认 font-size: 1.17em + line-height: 1.2，而 <p></p> 是 1em + 1.5，导致基线对齐错位。
建议显式统一文本类元素的排版基础：
- 给所有段落/标题设相同
line-height（如1.4） - 用
margin-block-start/margin-block-end替代margin-top/margin-bottom，它基于书写模式，兼容性更好（现代浏览器支持良好） - 对齐时考虑
vertical-align或使用flex align-items: baseline显式控制
留白是否均匀，最终看的是视觉节奏，不是代码数值是否相等。最常被忽略的是：同一套 margin 在不同字体、不同字号、不同行高下的实际像素高度完全不同。
