margin-inline-start在rtl下没翻转是因为它仅响应显式设置的direction或dir属性，而非浏览器默认方向；若html根节点未设dir="rtl"或css未声明direction: rtl，则其仍映射为margin-left，不会自动切换为margin-right。
为什么margin-inline-start在 RTL 下没翻转？
直接把 margin-left 换成 margin-inline-start 不会自动适配 RTL，除非当前上下文已明确声明书写方向。逻辑属性不读取浏览器默认方向，只响应 dir 属性或 direction CSS 规则的显式设置。
常见错误现象：RTL 页面里 margin-inline-start 依然往左推，computed 样式显示它解析为 margin-left 值，而非 margin-right。
- 检查 HTML 根节点是否带
dir="rtl"（如） - 若用 React/Vue 等框架，确认
dir属性被透传到真实 DOM，而非仅存在虚拟节点中 - 避免仅靠局部元素加
dir="rtl"：父级未设方向时，子元素的dir可能不触发继承链上的逻辑映射 -
writing-mode: vertical-rl会彻底改变 inline 轴含义——此时margin-inline-start指向顶部，不是左右
margin-inline 简写能不能替代 margin-left + margin-right？
可以，但必须成对替换，且注意 Safari 兼容性限制。
物理边距存在隐含镜像关系，单点替换会破坏 RTL 下的视觉对称。比如导航项用 margin-right: 8px 分隔，只换 margin-inline-end: 8px 是对的；但如果容器同时有 margin-left: 16px 控制外边距，就必须同步换成 margin-inline-start: 16px，否则 RTL 下左右间距不一致。
-
margin: 10px 20px 10px 20px不能直接套margin-inline: 20px——它只控制 inline 轴，垂直方向仍需margin-block: 10px -
margin-inline: 8px 16px在 Safari 14.0 以下会被直接忽略，必须拆成margin-inline-start: 8px和margin-inline-end: 16px -
margin-top/margin-bottom可暂不改（块轴在 RTL 中不变），但为语义统一建议逐步迁移到margin-block-start/margin-block-end
旧浏览器怎么安全兜底？
别依赖 @supports (margin-inline: 0) 做降级——IE11、Safari 12.1 之前、部分 SSR 环境根本不识别 @supports，整块规则会被跳过，导致无 fallback。
更稳妥的做法是并存写法：
button {
margin-left: 1rem;
margin-right: 1rem;
margin-inline: 1rem;
}
旧浏览器读前两行，新浏览器覆盖为第三行。PostCSS 插件（如 postcss-logical）可自动补全，但它不处理运行时动态切换 dir 的场景，只适用于构建时静态转换。
text-align: start 还是 text-align: left？
用 text-align: start。它会随 dir 自动切换对齐方向：LTR 下等价于 left，RTL 下等价于 right。
容易踩的坑：
-
text-align: center和text-align: justify不受方向影响，无需替换 -
text-align: start依赖父级direction或dir，如果父级没设方向，它退化为left - 不要混用：
text-align: start和margin-inline-start必须在相同方向上下文中才协同生效
真正难的是 writing-mode 切换（比如竖排中文），此时 inline-start 指向顶部，block-start 指向右侧——这种场景下，光靠 dir="rtl" 不够，必须配合 writing-mode: vertical-rl 显式声明，且所有逻辑属性都要重新验证映射关系。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
