应使用 margin-inline-start 替代 margin-left，因其在 RTL 场景下自动适配文本流起始侧（LTR 为左、RTL 为右），避免物理左侧错位；需优先替换功能性边距，box-sizing 与此无关。
为什么 margin-left 在 RTL 场景下会错位
当你写 margin-left: 16px，它在中文、英文（LTR）页面里是“往右推”，但在阿拉伯语、希伯来语（RTL）页面里，margin-left 实际作用于**物理左侧**——也就是朝页面内部方向推，导致卡片重叠、导航项挤出容器、表单控件对齐崩坏。这不是浏览器 bug，而是物理方向与文本流方向硬绑定的必然结果。
用 margin-inline-start 替代 margin-left 的实操要点
改用逻辑属性才能让边距随 dir="rtl" 或 direction: rtl 自动翻转：
-
margin-inline-start始终指向当前文本流起始侧（LTR 是左，RTL 是右） -
margin-inline-end始终指向文本流结束侧（LTR 是右，RTL 是左） -
margin-inline: 1rem 0等价于margin-inline-start: 1rem; margin-inline-end: 0 - 不支持 IE；Chrome 87+、Firefox 63+、Safari 14.1+ 原生支持；旧版 Safari 可加
-webkit-margin-start前缀（仅部分版本有效）
哪些地方必须改，哪些可以暂缓
不是所有 margin-left 都要立刻替换，优先处理以下场景：
- 用于控制内容对齐或间距的“功能性边距”：如导航菜单项间隔、表单输入框左右留白、卡片组件外边距
- 显式配合
dir="rtl"使用的组件样式（比如多语言切换后动态插入的 class） - 封装为 UI 组件库的通用间距类（如
.spacing-s、.ml-2） - 可暂缓的：纯装饰性微调（如图标向左偏移 2px）、绝对定位中强耦合
left的悬浮按钮（此时应改用inset-inline-start）
box-sizing 和 margin-inline 解决的是不同问题
box-sizing: border-box 控制宽高是否包含 padding 和 border，和文字方向完全无关。即使你全局写了 * { box-sizing: border-box }，只要还在用 margin-left，RTL 下照样错位。真正要建立的习惯是：只要边距作用于文本流主轴（inline axis），就默认用 margin-inline-start 或 margin-inline-end；只有当它明确服务于物理定位（比如固定右下角按钮），才保留 margin-right 并加注释说明。
立即学习“前端免费学习笔记（深入）”；
