margin-block 是按书写模式动态映射到块轴的逻辑外边距，本质区别在于它表达语义意图（块起始/结束间距）而非固定物理方向；writing-mode 变化时，其映射的物理边随之改变，而 margin-top/margin-bottom 始终绑定顶部/底部。
margin-block 是什么，和 margin-top/margin-bottom 有什么本质区别
margin-block 不是“上下 margin 的新写法”，而是按书写模式（writing-mode）动态映射到块轴方向的逻辑外边距。当 writing-mode: horizontal-tb（默认）时，它等价于 margin-top 和 margin-bottom；但换成 writing-mode: vertical-rl，它就对应左侧和右侧——也就是物理意义上的“上下”概念消失了，取而代之的是“块起始”和“块结束”。
这意味着：
- 用
margin-top写死的是物理方向，不管文字怎么转，它永远贴顶 - 用
margin-block表达的是语义意图：我希望元素在块流方向上和邻居保持距离
常见错误现象：
- 在支持垂直排版的页面里，只改了
writing-mode却没换margin，结果布局错位、文字被截断 - 把
margin-block: 1rem当成“同时设上下为 1rem”，其实它设的是块起始和块结束各 1rem（类似margin-top+margin-bottom合并写法，但语义不同）
什么时候必须用 margin-block 而不是 margin-top/margin-bottom
真正需要它的场景，不是“想尝鲜 CSS 新特性”，而是你明确要支持多书写模式——比如中日韩混合排版、RTL 布局切换、或可配置阅读方向的文档系统。
立即学习“前端免费学习笔记（深入）”；
使用场景包括：
- 多语言 CMS 输出 HTML 时，通过 class 切换
writing-mode，所有间距需自动适配 - 组件库封装按钮、卡片等原子组件，要求它们在横排/竖排下视觉节奏一致
- 使用
@supports (margin-block: 1px)做渐进增强，避免老浏览器崩布局
注意兼容性影响：
- Chrome 87+、Firefox 63+、Safari 14.1+ 支持
margin-block - IE 完全不支持，Edge 18 及更早也不支持
- 如果项目还需兼容旧版 Safari（<14.1），不能直接替换，得加回退规则：
margin-block: 1rem;<br>margin-top: 1rem;<br>margin-bottom: 1rem;
margin-block 的参数怎么写，start/end 和 1值/2值的区别
margin-block 接收 1 个或 2 个值，顺序固定为：margin-block: <block-start> <block-end>。
-
margin-block: 0.5rem→ 块起始和块结束都设为 0.5rem（等价于margin-block-start: 0.5rem; margin-block-end: 0.5rem） -
margin-block: 0.5rem 1rem→ 块起始 0.5rem，块结束 1rem
容易踩的坑：
- 误以为
margin-block: 1rem 0是“上 1rem、下 0”，实际是“块起始 1rem、块结束 0”，在竖排时可能变成“左 1rem、右 0”，视觉反直觉 - 和
margin-inline混用时没理清轴向：块轴（block）管段落流向，内联轴（inline）管文字流向，两者正交 - 不要试图用
margin-block: auto实现垂直居中——它只控制块轴上的外边距分配，不触发块级居中行为
盒模型里，margin-block 影响哪些计算，哪些不影响
margin-block 只参与外边距合并（margin collapsing）和尺寸计算中的“外部空间”部分，但它不改变盒本身的 width/height、border-box 尺寸，也不影响 padding 或 content 的行为。
关键影响点：
- 在
writing-mode: vertical-rl下，margin-block的值会作用在容器的 left/right 边，此时若父容器宽度固定，过大的margin-block可能导致溢出（而不是换行） - 外边距合并仍发生，但合并发生在块起始端或块结束端之间，不是“上下”之间——例如两个
display: block元素在竖排流中，它们的margin-block-end和下一个元素的margin-block-start会合并 - Flex/Grid 容器中，
margin-block依然生效，但可能被对齐属性（如align-items）覆盖视觉效果
复杂点在于：逻辑属性让“方向”从物理坐标系变成了上下文依赖的语义轴。一旦你写了 margin-block，就必须同步检查所有相关样式是否也用了逻辑属性（比如 padding-block、border-block），否则物理和逻辑混用，很快就会失控。
