margin-inline-start比margin-left更可靠，因其根据dir属性动态映射物理方向：ltr时等效margin-left，rtl时自动映射为margin-right；而margin-left始终绑定屏幕左侧，不随文本流变化。
直接用 margin-inline-start 替代 margin-left，配合根元素 dir="rtl"，就能让同一套 CSS 在阿拉伯语、希伯来语等 RTL 场景下自动翻转间距方向——不需要写两套样式，也不依赖 [dir="rtl"] 覆盖规则。
为什么 margin-inline-start 比 margin-left 更可靠
物理属性是“死绑定”：无论页面语言怎么变，margin-left 永远往屏幕左边推。逻辑属性是“活映射”：浏览器根据当前 dir 值动态决定它该对应左还是右。
-
margin-inline-start: 16px在dir="ltr"下等效margin-left: 16px，在dir="rtl"下自动变成margin-right: 16px - 如果只改
direction: rtl但漏掉dir属性，margin-inline-start会退化为无效果（尤其 Safari） -
text-align: start必须和dir配合才有意义；单独写text-align: left在 RTL 下仍左对齐，违背用户预期
哪些逻辑属性现在可以放心用
2026 年中，Chrome 120+、Firefox 125+、Safari 15.4+ 已稳定支持以下三类，PostCSS 插件也能为旧版生成 fallback：
- 盒模型类：
margin-inline-start、padding-inline-end、border-block-start - 定位类：
inset-inline-start（替代left）、inset-block-end（替代bottom） - 文本类：
text-align: start、text-align: end（彻底弃用left/right）
注意：float: inline-start 在 Safari 15.4+ 才可靠，旧版仍需降级到 [dir="rtl"] { float: right; }。
伪元素和绝对定位最容易翻车
常见错误现象：带箭头的下拉菜单、消息气泡角标、RTL 下图标错位——根本原因是用了 right: 0 或 ::before { left: 0; } 这类物理偏移。
- 绝对定位必须用
inset-inline-start: 8px替代left: 8px，否则在 RTL 下仍钉右，视觉上却跑到内容起始侧之外 -
::before和::after的定位属性不写逻辑版，就会脱离内容流向，导致“文字右对齐了，但箭头还在左边” -
:dir(ltr)和:dir(rtl)是真实可用的选择器，但兼容性有限（Safari 15.4+、Firefox 96+），只适合做微调，别当主力
最常被忽略的一点：逻辑属性不是“开了就自动生效”，它强依赖 dir + lang 双属性同步设置。只加 dir="rtl" 不设 lang="ar"，会导致 Safari 中输入框光标移动错乱、数字格式异常、text-align: start 对 <input> 失效——这些都不是 CSS 问题，而是浏览器排版上下文没建立完整。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
