margin-inline-start 在 rtl 下未翻转是因为其映射依赖元素自身的 direction 计算结果，而非页面或系统设置；即使 html 设了 dir="rtl"，若组件内强制 direction: ltr，它仍指向物理左侧。
直接用 margin-inline-start 替换 margin-left 不会自动适配 RTL，除非你已确保目标元素自身解析出正确的 direction 或 dir 上下文；否则它只是个更难懂的 margin-left。
为什么 margin-inline-start 在 RTL 下没翻转？
浏览器不是根据页面语言或系统设置决定映射方向，而是看该元素自身的 direction 计算结果。哪怕 已写，如果组件内部 CSS 强制设了 direction: ltr（比如某些 UI 库重置样式），margin-inline-start 就仍指向物理左侧。
- 用 DevTools 的 Computed 面板直接查
margin-inline-start解析成了margin-left还是margin-right，比猜更准 - 检查目标元素是否被
direction: ltr、writing-mode: horizontal-tb等显式覆盖 - 不要依赖继承——
margin-inline作用域是元素自身，不是父级或 :root
哪些地方必须成对替换，哪些可以暂缓？
单点替换 margin-left → margin-inline-start 很容易崩布局，因为物理边距天然成对存在镜像关系。逻辑属性也得保持语义对称。
- 必须同步改：
margin-left+margin-right→margin-inline-start+margin-inline-end - 建议逐步改：
margin-top/margin-bottom→margin-block-start/margin-block-end（块轴在 RTL 中不变，但语义统一） - 可暂缓：
transform: translateX()、绝对定位的left（应改用inset-inline-start）、纯装饰性微调（如图标偏移 2px） - 简写
margin: 10px 20px不能直接套margin-inline: 20px——它只管 inline 轴，垂直方向还得补margin-block: 10px
如何安全降级并避免混用冲突？
混用 margin-left 和 margin-inline-start 是最常见翻车点：LTR 下后者被前者覆盖，RTL 下前者又把本该生效的右边距干掉，视觉上突然塌陷。
- 迁移老代码时，批量删掉所有
margin-left/margin-right，换成对应逻辑属性，别留一半 - 第三方库（如 Ant Design）默认仍用物理属性，别指望它自动适配；稳妥做法是包一层 wrapper 并单独控制其
margin-inline - 兼容旧浏览器时，不用 PostCSS 自动补全，手动写 fallback：
@supports not (margin-inline-start: 1rem) { .component { margin-left: 1rem; } } .component { margin-inline-start: 1rem; } - Firefox 直到 v115 才支持单值
margin-inline: auto；需要居中时，写margin-inline: 0 auto更稳
最常被忽略的两个硬性前提
逻辑属性不是“加了 dir="rtl" 就自动翻转”的魔法，它强依赖两个实时计算条件：
- 元素自身必须能正确解析出
direction: rtl（不是靠父级继承，也不是靠 JS 动态 class 切换后没触发重绘） - 若涉及输入框、数字格式、光标行为等，仅
dir="rtl"不够，还必须同步设lang="ar"或lang="he"，否则 Safari 可能光标乱跳、text-align: start对<input>失效
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
