应使用margin-inline-start替代margin-left，因其在LTR时映射为左、RTL时自动映射为右；但必须配合显式dir="rtl"或direction: rtl上下文，否则仍等效margin-left。
direction: rtl 不会让 margin-left “颠倒”，它只是让 margin-inline-start 映射到右边
这不是 margin-left 被“颠倒”了，而是你误用了物理属性去控制逻辑方向。margin-left 始终作用于**物理左侧**，无论 direction 是 ltr 还是 rtl。当你写 margin-left: 16px，它在阿拉伯语页面里依然往屏幕左边推——而 RTL 页面的视觉起点在右，结果就是元素被推向页面内部，看起来像“挤在一起”或“错位”。真正会随 direction 变化的，是 margin-inline-start：LTR 下它等于 margin-left，RTL 下它自动解析为 margin-right。
为什么改用 margin-inline-start 后没效果？
常见原因是上下文缺失。逻辑属性不依赖浏览器语言或系统设置，只响应显式的书写方向声明：
- HTML 根节点没加
dir="rtl"（仅 CSS 写direction: rtl在某些场景下继承不可靠） - 父容器没设
direction: rtl，子元素的margin-inline-start就按默认 ltr 解析，等价于margin-left - 用了框架（如 React）动态插入内容，但未透传
dir属性，导致子元素无法继承方向上下文 - 检查 DevTools 的 computed 样式：如果
margin-inline-start最终显示为margin-left: 16px，说明方向上下文没生效
哪些 margin 必须成对替换？
单点替换大概率破坏布局平衡。物理边距隐含镜像关系，逻辑属性也要保持对称：
-
margin-left和margin-right必须同时换成margin-inline-start和margin-inline-end -
margin: 10px 20px 10px 20px不能直接套margin-inline: 20px—— 它只管 inline 轴，垂直方向得用margin-block: 10px -
padding-left/padding-right同理，应改为padding-inline-start/padding-inline-end -
text-align: left/right应改为text-align: start/end，否则与margin-inline-start在 RTL 下同向“右偏”，造成视觉叠加
旧浏览器里 margin-inline-start 失效怎么办？
Firefox 70–89、Safari 13–15.6 对 margin-inline-start 的 direction 映射支持不完整，尤其嵌套 bdi 或 inline-flex 时容易 fallback 到 margin-left：
立即学习“前端免费学习笔记（深入）”；
- 用
@supports (margin-inline-start: 1em)包裹逻辑属性，并在外部保留物理属性兜底 - 避免混用：
margin-inline-start和margin-left不要出现在同一选择器中 - 对关键布局节点（如表单控件、按钮组），显式加
unicode-bidi: isolate防止 bidi 重排序干扰解析 - Safari 14.1 前不支持
inset-inline-start，定位类需用:dir(rtl)手动写两套规则
dir 是否从根节点开始真实存在，而不是 CSS 里某一行 direction: rtl 写没写对。很多 RTL 布局崩坏，问题不在属性本身，而在方向上下文根本没建立起来。 
