margin-inline 不自动适配 rtl，需显式设置 dir 或 direction；简写有兼容性风险，推荐拆分为 margin-inline-start/end；迁移时应并存物理与逻辑边距，并同步更新 text-align: start/end。
margin-inline 本身不会自动适配 RTL，除非你已正确设置 dir 或 direction 上下文。它不是“一换就灵”的魔法开关，而是依赖书写方向的映射机制。
为什么写了 margin-inline-start 却没翻转？
逻辑属性不读浏览器默认方向，只响应当前元素或最近祖先的 dir 属性或 direction 声明。
- HTML 根节点没加
dir="rtl"→margin-inline-start就等价于margin-left - React 组件里用
dir="rtl"但没透传到子组件 → 子元素继承不到方向，映射失效 - 用了
writing-mode: vertical-rl→inline-start指向顶部，不是左右，视觉效果完全偏离预期 - 检查 computed style：如果
margin-inline-start在 RTL 下解析出的仍是 left 边距，说明方向上下文缺失
margin-inline 和 margin-block 的简写陷阱
简写看似省事，但兼容性和语义控制力远不如拆开写。
-
margin-inline: 1rem 2rem：Safari 14.0 以下直接忽略整条声明，不留 fallback -
margin-block: 1rem等价于margin-block-start: 1rem; margin-block-end: 1rem，安全；但margin-block: 1rem 1.5rem（start end）在部分旧引擎中行为不一致 - 推荐始终拆成
margin-inline-start/margin-inline-end单独声明，可控、可 debug、兼容性明确
如何安全地渐进迁移物理边距？
不能只改一半，否则 RTL 下布局错乱；也不能全靠 @supports，它在 SSR 或老浏览器里常失效。
- 并存写法最稳：
margin-left: 1rem; margin-right: 1rem; margin-inline: 1rem;—— 旧浏览器读前两行，新浏览器覆盖为第三行 -
margin-top/margin-bottom可暂缓替换（block 轴在 LTR/RTL 中物理位置不变），但若项目已启用writing-mode: vertical-*，就必须同步换成margin-block-start等 - 避免混合使用：比如
margin-left+margin-inline-end，方向语义冲突，维护时极易出错
text-align: start 不等于 text-align: left
这是最容易被忽略的配套改动。即使边距全逻辑化了，文字对齐没改，RTL 下依然左对齐，破坏整体镜像。
-
text-align: left是物理固定，text-align: start才随dir自动切换（LTR→left，RTL→right） - 同理：
text-align: end替代text-align: right；text-align: center和text-align: justify无需改，它们无方向性 - 注意：
text-align不受writing-mode影响，只响应direction，所以确保父级有明确dir或direction
dir，整个逻辑链就断在第一环。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
