用 margin-block 替代 margin-top/margin-bottom 更语义化：它基于块流方向而非物理方向，自动适配水平/竖排、ltr/rtl等书写模式，支持 writing-mode 变化，提升多语言排版一致性与可维护性。
用 margin-block 替代 margin-top/margin-bottom 更语义化
当页面需支持多语言书写模式（比如竖排中文、RTL 阿拉伯语），margin-top 和 margin-bottom 会失效或行为错乱，因为它们绑定的是物理方向。而 margin-block-start 和 margin-block-end 指向逻辑上的“块流起始”和“块流结束”，浏览器自动映射到当前书写模式下的正确边——这才是现代排版该用的方式。
实际写法是：
p {
margin-block-start: 1.2rem;
margin-block-end: 1.2rem;
}
它等价于在水平从左到右（ltr）模式下设 margin-top 和 margin-bottom，但保留了对 writing-mode 变化的适应力。别直接写 margin-block: 1.2rem——这个简写目前兼容性差（Safari 16.4+ 才稳定支持），老版本会整个忽略。
margin-block-start 在嵌套结构里精准控制首尾空白
常见场景：文章中某个 <p class="intro"></p> 后紧跟一个 <ul></ul> 列表，你只想消除 <p></p> 和 <ul></ul> 之间的空隙，又不想影响其他段落间距。这时候给 <ul></ul> 设 margin-block-start: 0 就比全局重置 ul { margin: 0; } 安全得多。
- 只影响目标元素自身块流起点，不波及兄弟或父容器
- 配合属性选择器（如
ul[role="list"]）可避免样式污染 - 值推荐用
em或rem，比如margin-block-start: 0.5em，随字号缩放，打印/高对比度模式下也稳
兼容性 fallback 必须手动加，不能依赖 @supports
margin-block-start 在 Chrome 87+、Firefox 63+、Edge 79+ 支持良好，但 Safari 14.1–16.3 仅部分支持，iOS WebView 甚至更旧。光靠 @supports (margin-block-start: 0) 做降级不可靠——某些 Safari 版本会误报支持，结果渲染出双倍间距。
稳妥做法是双重声明：
p {
margin-top: 1.2rem;
margin-bottom: 1.2rem;
margin-block-start: 1.2rem;
margin-block-end: 1.2rem;
}
现代浏览器会用后两者覆盖前两者；老浏览器直接忽略后两行，照常走 margin-top/margin-bottom。别省这四行——这是目前最轻量、最确定的兼容方案。
别把 margin-block 和 gap 混用在同一容器里
如果段落被包在 display: flex; flex-direction: column; 的容器中，你既设了容器的 gap: 1.5rem，又给每个 <p></p> 单独加 margin-block-start，结果不是叠加，而是可能触发意外的外边距合并或 gap 覆盖，最终间距失控。
原则很明确：
- 用
gap→ 就别给子<p></p>设任何垂直 margin，包括margin-block类属性 - 用
margin-block→ 确保父容器是常规块流（display: block），否则逻辑方向可能被 flex/grid 的轴向干扰 - 二者混用的唯一安全场景：父容器是 grid，且你用
margin-block控制某一段的内部行距微调（比如首行下沉），而非段间距离
真正容易被忽略的是：逻辑属性生效的前提是元素本身参与块级格式化上下文（BFC）。如果 <p></p> 被设了 float 或 position: absolute，margin-block-start 就完全不工作——这点调试时很难一眼发现。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
