外边距折叠导致相邻块级元素的 margin-bottom 和 margin-top 合并为较大值而非相加；解决方法包括打破折叠条件、统一使用 margin-bottom、改用 padding 或 CSS 自定义属性，以及在 flex/grid 中优先使用 gap。
margin-bottom 和 margin-top 同时设置会折叠
两个相邻块级元素分别设 解决思路不是“加更多 margin”，而是打破折叠条件： 硬编码多个 这样改间距只需调一次 立即学习“前端免费学习笔记（深入）”； 在 例如垂直堆叠卡片： 即使 margin/padding 一致，视觉留白也可能因行高或字号差异显得不均。比如 建议显式统一文本类元素的排版基础： 留白是否均匀，最终看的是视觉节奏，不是代码数值是否相等。最常被忽略的是：同一套 margin-bottom: 20px 和 margin-top: 20px，实际间距不是 40px，而是 20px——这是 CSS 的外边距折叠（margin collapse）行为。常见于 、、block 的元素之间。
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 影响
默认 font-size: 1.17em + line-height: 1.2，而 是 1em + 1.5，导致基线对齐错位。
line-height（如 1.4）margin-block-start/margin-block-end 替代 margin-top/margin-bottom，它基于书写模式，兼容性更好（现代浏览器支持良好）vertical-align 或使用 flex align-items: baseline 显式控制margin 在不同字体、不同字号、不同行高下的实际像素高度完全不同。
