margin-left在RTL页面中出问题是因为它绑定物理方向，导致LTR时右推、RTL时反向左推，破坏布局逻辑；应改用margin-inline-start等逻辑属性，按文本流起始侧动态适配。
为什么 margin-left 在 RTL 页面里会出问题
当你给一个元素写 margin-left: 20px，它在从左到右（LTR）语言如中文、英文里是“往右推”，但在从右到左（RTL）语言如阿拉伯语、希伯来语里，margin-left 实际上是“往左推”——也就是朝页面**内部**方向推，导致布局错位、文字重叠或容器溢出。这不是 bug，而是逻辑方向和书写方向不匹配的必然结果。
用 margin-inline 替代 margin-left 的具体写法
margin-inline 是 CSS 逻辑属性，它不绑定物理方向（left/right），而绑定文本流方向：
-
margin-inline-start：始终指向当前文本流的起始侧（LTR 是左，RTL 是右） -
margin-inline-end：始终指向当前文本流的结束侧（LTR 是右，RTL 是右） -
margin-inline: 10px 16px等价于margin-inline-start: 10px; margin-inline-end: 16px
示例：
.card {
margin-inline-start: 1rem; /* LTR → 左边距；RTL → 右边距 */
margin-inline-end: 0;
}注意：margin-inline 不支持 IE，现代浏览器（Chrome 87+、Firefox 63+、Safari 14.1+）均支持；若需兼容旧版 Safari，可加 -webkit-margin-start 前缀（但仅限部分版本）。
立即学习“前端免费学习笔记（深入）”；
哪些地方必须改，哪些可以先不动
不是所有 margin-left 都要一刀切替换。重点改以下场景：
- 用于控制内容对齐或间距的“功能性边距”，比如导航项间隔、表单控件左右留白、卡片外边距
- 配合
direction: rtl或dir="rtl"使用的组件样式 - 被封装为 UI 组件库的通用类（如
.spacing-l）
可暂缓替换的场景：
- 纯视觉装饰性偏移（如图标微调），且明确只用于 LTR 上下文
- 与绝对定位强耦合的
left/right值（此时应优先考虑inset-inline-start） - 已通过
text-align或flex-direction控制流向的容器内部布局（它们本身已具备逻辑性）
box-sizing 和逻辑属性不是一回事，别混用
box-sizing: border-box 解决的是“宽高是否包含 padding/border”的计算问题，和文字方向完全无关。即使你全局用了 * { box-sizing: border-box }，只要还在写 margin-left，RTL 下依然会错位。两者解决的是不同维度的问题：一个是尺寸归属，一个是空间方向。
真正需要建立的习惯是：只要边距作用于文本流主轴（inline axis），就默认用 margin-inline-*；只有当它明确服务于物理定位（比如固定悬浮按钮贴右上角），才保留 margin-right 并加注释说明。
