错位根源是物理方向属性（如margin-left、left）与文本流向不匹配，叠加box-sizing: content-box后被放大；应改用margin-inline-start/inset-inline-start等逻辑属性，并全局启用box-sizing: border-box。
CSS盒模型本身在RTL页面中不会直接导致错位——错位根源是物理方向属性（如 margin-left、left）与文本流向不匹配，叠加盒模型默认行为（box-sizing: content-box）后被放大。
margin-left 在 RTL 下“反向生效”是错位的导火索
你写 margin-left: 16px，本意是“从文本起始侧留空”，但在 RTL 环境下，left 指的是屏幕左侧（物理左），而非文本流起始侧（对阿拉伯语来说是右侧）。结果就是：LTR 时向右推，RTL 时向左推——把内容往页面中心挤，甚至覆盖相邻元素。
- 典型现象：卡片列表在阿拉伯语下右边界重叠、按钮被顶出容器、表单控件文字贴边
- 不是浏览器 bug，是 CSS 规范明确规定的物理方向语义
- 仅靠改
direction: rtl不会自动翻转margin-left，它依然绑定物理左
box-sizing: content-box 让 padding/border 成为“放大器”
当父容器用 width: 100%，子元素又用了 margin-left: 16px + padding: 12px + border: 1px，且保持默认 box-sizing: content-box 时，总宽度 = 内容宽 + 左右 padding + 左右 border + 左右 margin。RTL 下 margin-left 向内推，再叠加向外撑的 padding/border，错位幅度成倍增加。
- 例如：一个
width: calc(100% - 32px)的输入框，在 RTL 下因margin-left实际占位更少，反而留出空白或触发换行 - 第三方组件库若没设
box-sizing: border-box，其内部padding会进一步破坏你手动计算的尺寸
inset-inline-start 和 margin-inline-start 才是 RTL 安全解法
它们不看屏幕左右，只认当前文本流：LTR 时 inline-start = 左，RTL 时 = 右。配合 box-sizing: border-box 全局启用，才能让尺寸和间距都“懂方向”。
立即学习“前端免费学习笔记（深入）”；
- 定位用
inset-inline-start替代left，关闭按钮就能始终贴“文本起始侧”（LTR 左 / RTL 右） - 外边距统一用
margin-inline-start/margin-inline-end，避免混用margin-left和margin-right - 必须确保祖先元素有正确
direction或dir属性，否则逻辑属性无法解析“哪边是 start”
真正容易被忽略的点是：盒模型和逻辑属性要一起改。只换 margin-inline-start 但保留 content-box，padding 还是会撑破容器；只切 border-box 但继续用 left，定位仍会翻车。两者是 RTL 布局稳定的最小闭环。
