直接将margin-left换成margin-inline-start不会自动适配rtl，除非已正确设置direction或dir上下文；否则它仅等价于margin-left，无方向翻转效果。
直接把 margin-left 换成 margin-inline-start 不会自动适配 RTL，除非你已正确设置 direction 或 dir 上下文；否则它只是个更难懂的 margin-left。
为什么换完没反应？——逻辑属性不认浏览器默认方向
逻辑属性不是“开箱即用”，它的映射依赖当前元素或祖先的书写方向。如果你只改了 CSS，但 HTML 根节点没加 dir="rtl"，或者样式表里没写 html { direction: rtl; }，那 margin-inline-start 就等价于 margin-left，RTL 下完全不会翻转。
- 检查 computed 样式中
margin-inline-start的最终值：它应该在 RTL 下解析为物理right边距，而不是left - 确认
direction是由父级继承而来，而非仅靠局部dir属性——某些框架（如 React）可能剥离原生dir，需显式透传 -
writing-mode: vertical-rl会彻底改变 inline 轴含义：margin-inline-start此时指向顶部，不是左右
哪些 margin 必须成对替换？——单点替换大概率崩布局
物理边距是成对存在的隐含镜像关系，单独改一个会打破视觉平衡。比如导航项用 margin-right: 8px 隔开，只换成 margin-inline-end: 8px 是对的；但如果同时存在 margin-left: 16px 控制容器外边距，就必须同步换成 margin-inline-start: 16px，否则 RTL 下两侧间距不对称。
-
margin-left+margin-right→ 必须同时改为margin-inline-start+margin-inline-end -
margin-top/margin-bottom可暂不改（块轴在 RTL 中不变），但为语义统一建议逐步迁移到margin-block-start/margin-block-end - 简写
margin: 10px 20px 10px 20px不能直接套margin-inline: 20px——它只控制 inline 轴，垂直方向仍需margin-block: 10px
旧浏览器怎么兜底？——别指望 @supports 在所有环境生效
@supports (margin-inline: 0) 在现代构建流程中可用，但在 IE11、Safari 12.1 之前或某些 SSR 环境里，@supports 本身不被识别，整个规则块会被跳过，导致无 fallback。
- 更稳妥的做法是并存写法：
margin-left: 1rem; margin-right: 1rem; margin-inline: 1rem;——旧浏览器读前两行，新浏览器覆盖为第三行 - 避免用
margin-inline: 8px 16px：Safari 14.0 以下会直接忽略该声明，必须拆成margin-inline-start和margin-inline-end单独写 - PostCSS 插件（如
postcss-logical）可自动补全，但注意它不处理运行时动态切换dir的场景，只适用于构建时已知方向的静态输出
图标和文字间距这种细节最容易翻车
按钮里图标常靠 margin-left: 8px 和文字隔开。换成 margin-inline-start: 8px 后，在 RTL 下图标会跑到文字右边——但用户预期是“图标始终在操作主语的逻辑前方”，也就是 RTL 下该在左边。
- 此时应改用
margin-inline-end: 8px：让图标永远在文字“之后”，即 LTR 下右、RTL 下左 - 若组件整体需镜像（如整个按钮内文字+图标顺序翻转），优先用
flex-direction: row-reverse+justify-content: flex-end，而非靠边距硬调 - 切忌混用：
margin-inline-start+float: right会导致方向冲突，float始终按物理方向执行
真正难的不是写对一个 margin-inline-start，而是确保整条组件链的方向上下文一致，并且降级后仍能保持基本可读与可交互——这要求你在改样式前，先看清 direction 是从哪来的、会不会被中间层截断、有没有运行时切换的可能。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
