使用 margin-block 替代 margin-top/bottom 可解决默认样式差异与 margin 折叠问题，结合全局重置和自定义变量建立统一垂直间距系统，提升布局一致性与可维护性。
页面中元素上下间距不一致，看起来杂乱，通常是因为开发者依赖默认样式或滥用 margin 实现垂直间隔。解决这类问题，关键在于建立统一的间距逻辑，而 margin-block 提供了更现代、更精准的控制方式。
为什么传统 margin-top/margin-bottom 容易失控？
直接使用 margin-top 和 margin-bottom 时，容易出现以下问题：
- 不同标签的浏览器默认 margin 不同（如 h1 ~ h6、p、ul 等）
- 父子或兄弟元素间 margin 叠加（collapse）导致实际间距不符合预期
- 在响应式布局中难以维护一致的视觉节奏
- 修改一处 margin，可能影响多处布局，牵一发而动全身
这些问题让垂直间距变得“不可控”，尤其在多人协作项目中更加明显。
用 margin-block 统一垂直外边距
margin-block 是 CSS 逻辑属性之一，代表块级方向上的外边距（即垂直方向，与书写模式有关）。它可以替代传统的 margin-top 和 margin-bottom，写法更简洁：
立即学习“前端免费学习笔记（深入）”；
.element {
margin-block: 1em; /* 相当于 top 和 bottom 都设为 1em */
}
如果你只想设置起始或结束端：
margin-block-start: 0.5em; /* 顶部 margin */ margin-block-end: 1em; /* 底部 margin */
这种方式语义清晰，且能更好适应不同文字排版方向（如竖排中文），更重要的是，它鼓励你以“逻辑流”的方式思考布局，而不是像素位置。
建立可维护的间距系统
要真正收敛间距问题，不能只靠单个属性，而是结合重置和设计系统思维：
- 全局重置所有元素默认 margin：
* { margin: 0; } 或使用更精细的 modern-normalize - 为常用文本元素定义基于 margin-block 的统一间距
例如：
p { margin-block: 0.8em; }
h2 { margin-block: 1.5em 1em; }
ul, ol { margin-block: 1em 0; } - 使用 CSS 自定义属性定义间距层级（如 --gap-sm、--gap-md）
- 配合 gap 属性用于 Flex/Grid 布局内部子元素，外部用 margin-block 控制模块间隔
实际示例：规整文章排版
一段内容混乱的文章区域，可通过以下方式快速收敛：
article > * {
margin-block: 1em 0;
}
article > h1,
article > h2,
article > h3 {
margin-block-start: 2em;
}
article > :first-child {
margin-block-start: 0;
}
这样确保每个块级子元素之间有统一的垂直间距，标题有额外呼吸感，首元素不空出多余空间。
基本上就这些。用 margin-block 替代零散的 margin-top/bottom，配合重置和结构化规则，能大幅降低上下间距失控的概率。不复杂但容易忽略。
