margin-inline-start 在 RTL 下未翻转是因为未设置 dir="rtl"，它依赖 dir 或 direction 上下文而非自动翻转；必须显式声明方向并成对替换逻辑属性，避免混用物理属性。
margin-inline-start 在 RTL 下没翻转？先确认 dir 属性是否生效
它不是“自动翻转的 margin-left”，而是严格依赖 dir 或 direction 上下文。没设 dir="rtl" 时，margin-inline-start 就等于 margin-left，RTL 下照样往左推——结果图标被挤出屏幕右侧，阿拉伯文本首行缩进错位。
必须确保根元素或目标容器显式声明方向：
-
<html dir="rtl">是最稳妥的做法，子元素自动继承 - 若只对局部区域启用 RTL，用
<div dir="rtl">包裹，并确保该容器内不混用float: left、text-align: right等物理属性 - 不要靠 JS 动态加类名模拟 RTL，
dir属性变更会触发 CSS 重计算，类名不会
哪些地方必须成对替换，不能只换单个 margin-left
逻辑属性不是“搜索替换”游戏，而是语义重构。单换一个 margin-inline-start，其他地方还用 margin-right，会导致内联顺序断裂。
- 按钮组间距：
margin-inline-end: 4px替代margin-right: 4px（最后一个按钮不需要）；第一个按钮前留空用margin-inline-start: 8px - 图标与文字间距：若图标是操作前缀（如搜索放大镜），应使用
margin-inline-end: 6px，这样 RTL 下图标仍在文字“视觉左侧” - contenteditable 容器：
padding-inline-start: 12px确保光标首次进入停在内容起始侧（LTR 是左，RTL 是右） - 段落对齐：
text-align: start必须配套padding-inline-start，否则首行缩进和换行逻辑脱节
margin-inline 简写语法有硬限制，别踩四值陷阱
margin-inline 看似方便，但语法比 margin 严格得多：它没有三值、四值写法，浏览器遇到非法语法会直接忽略整条声明。
立即学习“前端免费学习笔记（深入）”；
- ❌
margin-inline: 1rem 2rem 3rem—— 无效，忽略 - ❌
margin-inline: 1rem 2rem 3rem 4rem—— 同样无效 - ✅
margin-inline: 1rem→ 等价于margin-inline-start: 1rem; margin-inline-end: 1rem - ✅
margin-inline: 1rem 2rem→margin-inline-start: 1rem; margin-inline-end: 2rem - 若只需控制一侧（比如仅按钮图标左侧留空），直接写
margin-inline-start: 6px更安全、更清晰
旧版 Safari 和安卓 WebView 不认简写，降级必须手动双写
@supports (margin-inline: 0) 在某些安卓 WebView 中会误报支持，实际不渲染；Safari ≤15.3 对 margin-inline: 1rem 2rem 静默失效，DevTools 里甚至看不到计算值。
- 稳妥做法是手动拆开写：
margin-inline-start: 8px; margin-inline-end: 12px; - 对于
padding-block，建议双写：padding-block: 10px; padding-top: 10px; padding-bottom: 10px; - 别依赖 PostCSS 自动补全——它无法判断你是否漏写了
dir，也无法修复 Safari ≤15.3 的重排 bug
真正容易被忽略的点是：逻辑属性的行为完全由 dir 和 writing-mode 共同决定，而后者可能来自父容器、全局样式，甚至 SVG 内嵌上下文。调试时务必在 DevTools 的 Computed 面板里看最终解析值，而不是只信源码里的写法。
