直接用margin-inline、padding-block和text-align:start即可自动适配LTR/RTL布局，无需两套CSS；它仅在文本流方向间距场景（如按钮组、表单控件水平间隙）中替代margin-left/right，且需配合direction或writing-mode生效，不适用于绝对定位或非流式布局。
直接用 margin-inline、padding-block 和 text-align: start，就能让同一套 CSS 在 LTR（如英语）和 RTL（如阿拉伯语）页面里自动适配边距、内边距和对齐方向，不用写两套规则。
什么时候该用 margin-inline 而不是 margin-left/margin-right
当你处理的是沿文本流方向的间距时——比如按钮组水平排列、表单控件之间的水平空隙、卡片网格的列间隔——margin-inline 就是正确选择。它在 LTR 下等效于 margin-left: 16px; margin-right: 16px，在 RTL 下自动映射为右侧起始、左侧结束，无需额外 [dir="rtl"] 规则。
常见错误包括：
- 给绝对定位元素设
margin-inline: 20px，它不影响left/right偏移，只参与 layout flow 计算 - 误以为
margin-inline会翻转transform: translateX()方向，其实不会 - 在非文本流上下文中强行替换物理属性，比如侧边栏固定宽度布局中用
inline-size代替width，反而增加理解成本
margin-block-start 的“顶部”为什么有时在底部？
它的物理位置由 writing-mode 决定，不是 direction。默认 writing-mode: horizontal-tb（横排从上到下）时，margin-block-start ≈ margin-top；但若设了 writing-mode: vertical-rl（竖排从右到左，如传统中文古籍），块流变成从上到下 → 此时 margin-block-start 还是顶部；而 writing-mode: vertical-lr（竖排从左到右）时，块流从下到上，margin-block-start 就落在底部。
立即学习“前端免费学习笔记（深入）”；
绝大多数网页不需要改 writing-mode，所以 margin-block 可安全当上下边距用；但如果你在做电子书阅读器或古籍展示，必须显式检查当前 writing-mode 值，否则 margin-block-start 会出现在意料之外的位置。
如何安全降级兼容不支持逻辑属性的旧浏览器
别依赖 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) —— 后者在部分浏览器中始终返回 true，导致 fallback 不生效。
真正容易被忽略的是：逻辑属性只解决方向自适应，不解决内容语义反转（比如图标箭头、语言切换按钮顺序）。这些仍需结合 [dir] 属性或 JS 动态判断，不能指望 CSS 自动处理。
