应优先使用 margin-inline 而非 margin-left/margin-right，当边距沿文本流方向（如按钮组、表单控件水平间距）且需自动适配 LTR/RTL 时；margin-block 则用于块轴，其起始端由 writing-mode 决定而非 direction，降级需用 @supports + dir fallback。
能直接简化，但必须分清 inline 和 block 轴，且不能指望它自动翻转所有物理属性。
什么时候该用 margin-inline 而不是 margin-left/margin-right
当你写的边距是沿文本流动方向（比如按钮之间、列表项左右间距、输入框与标签的水平间隔）时，margin-inline 就是正确选择。它在 LTR 下等效于 margin-left + margin-right，在 RTL 下自动映射为右侧起始、左侧结束——你不用写 [dir="rtl"] .btn { margin-left: 12px; margin-right: 0; } 这类重复规则。
- 典型场景：按钮组、表单控件水平排列、卡片网格的列间距
- 错误用法：给一个绝对定位的浮层写
margin-inline: 20px，它不会影响 left/right 偏移，只影响计算后的 layout flow 表现 - 注意：
margin-inline不会改变元素的left/right值，也不影响transform: translateX()的方向
margin-block 的起始方向为什么有时不是“上边距”
margin-block-start 的实际物理位置由 writing-mode 决定，不是 direction。默认 writing-mode: horizontal-tb 时，它≈margin-top；但一旦设了 writing-mode: vertical-rl（如中文竖排），块流变成从上到下 → 此时 margin-block-start 就是顶部；而设成 writing-mode: vertical-lr，块流从下到上，margin-block-start 就变成底部。
- 绝大多数 Web 页面无需改
writing-mode，所以margin-block可安全当上下边距用 - 如果你在做电子书阅读器或古籍展示，必须显式检查
writing-mode值，否则margin-block-start会出人意料地出现在下方 -
direction: rtl对margin-block完全无影响 —— 它只管 inline 轴
如何安全降级兼容不支持逻辑属性的旧浏览器
别依赖 PostCSS 自动补全，手动控制更可靠。用 @supports 包裹逻辑写法，再在外层写物理 fallback。
立即学习“前端免费学习笔记（深入）”；
.card {
margin-inline: 16px;
}
@supports not (margin-inline: 16px) {
.card {
margin-left: 16px;
margin-right: 16px;
}
[dir="rtl"] .card {
margin-left: 16px;
margin-right: 16px;
}
}
-
@supports检测必须写完整声明，如@supports (margin-inline: 16px)，不能只写@supports (margin-inline) - 不要省略 RTL fallback 中的
[dir="rtl"]选择器，否则旧浏览器里 RTL 页面仍会用 left/right 导致错位 - Chrome 87+、Firefox 89+、Safari 15.4+ 已稳定支持，IE 和 Android 4.x WebView 需要完整 fallback
哪些地方逻辑属性根本没法替代物理写法
不是所有方向相关属性都有逻辑对应。比如 border-radius 就没有 border-start-start-radius（规范未定义），background-position: left top 也不会因 direction 改变锚点，clip-path 和 mask-position 同样不响应。
- 遇到
border-top-left-radius这类需求，只能用[dir="rtl"]切 class 或 JS 检测后动态加类 -
background-position: right top在 RTL 下仍是右上角，不会“自动变成左上角”，得配合background-position: logical top end（仅 Safari 支持，不推荐）或换用background-position-x+ JS - 图标翻转（如箭头）仍需
transform: scaleX(-1)或 SVGflip属性，逻辑属性不接管图形渲染
真正容易被忽略的是：逻辑属性生效的前提是元素有明确的 writing-mode 和 direction 上下文。如果父容器没设 dir，子元素又用了 dir="rtl"，部分浏览器可能无法正确推导 margin-inline-start 的映射方向 —— 最稳妥的做法是把 dir 写在根元素上，并保持层级一致。
