该用 margin-inline 而非 margin-left/right 时：需支持多语言（如 ltr/rtl）或多种书写模式（如竖排），按钮组、表单控件、卡片网格等沿文本流方向的水平间距应优先使用 margin-inline，它依 direction 和 writing-mode 自动映射起始/结束侧，避免重复写[dir="rtl"]规则。
什么时候该用 margin-inline 而不是 margin-left
当你处理按钮组水平间距、表单控件间空隙、卡片网格列间隔这类“沿文本流方向”的留白时，margin-inline 是唯一合理的选项。它在 dir="ltr" 下等效于 margin-left: 16px; margin-right: 16px，在 dir="rtl" 下自动翻转为右侧起始、左侧结束，无需额外写 [dir="rtl"] 规则。
常见错误包括：
- 给绝对定位元素设
margin-inline: 20px—— 它不影响left/right偏移，只参与 layout flow 计算 - 误以为
margin-inline会翻转transform: translateX()方向，其实不会 - 在侧边栏固定宽度布局中强行用
inline-size替代width，反而增加理解成本
inset-inline-start 替代 left 的真实使用场景
下拉菜单箭头、消息气泡角标、输入框右侧图标的定位，都依赖“内容起始侧”而非“屏幕左侧”。用 left: 8px 在 RTL 下仍钉死物理左边界，视觉上会跑到内容之外；而 inset-inline-start: 8px 始终贴合文字书写起点。
必须注意：
-
inset-inline-start只对position: absolute或fixed元素生效，不适用于 static 或 relative - 伪元素如
::before的定位也得用逻辑属性，否则right: 0在 RTL 下仍钉右，违背用户预期 - Safari ≤15.6 对
border-inline支持不全，需配合@supports降级
为什么 text-align: start 必须和 dir 配合才有效
text-align: left 是物理值，永远指向屏幕左侧；text-align: start 是逻辑值，它的“开始”由 dir 决定：LTR 下是左，RTL 下是右。单独写 text-align: start 但没设 dir="rtl"，浏览器无法推断上下文，就会退化为默认行为。
特别容易被忽略的点：
-
<input>和<textarea></textarea>对text-align: start的支持依赖完整排版上下文，只加lang="ar"不加dir="rtl"，光标移动和数字格式可能异常 -
:dir(ltr)和:dir(rtl)选择器虽可用，但 Safari 15.4+ 才稳定，仅适合微调，不能当主力 - JS 动态切换语言时，必须同步更新
document.documentElement.dir，否则 CSS 不重算
如何安全降级到不支持逻辑属性的旧浏览器
别依赖 PostCSS 自动补全 —— 它生成的 fallback 往往覆盖不全或顺序错乱。手动控制更可靠：用 @supports 包裹逻辑写法，外层写物理 fallback。
button {
margin-left: 12px;
margin-right: 12px;
}
@supports (margin-inline: 12px) {
button {
margin-inline: 12px;
}
}
关键细节：
-
@supports检测必须用完整属性名（如margin-inline），不能只写(inset-inline-start: 0)—— Safari 15.4 对部分 inset 属性支持不一致 - 盒模型类（
margin/padding/border）可放心替换；inline-size/block-size替换width/height必须成对出现，混用会出错 - flex/grid 子项里慎用
inline-size微调宽度——主轴尺寸可能直接覆盖它，优先用flex-basis或min-inline-size
最常被忽略的一点：逻辑属性不是“开了就自动生效”，它强依赖 dir + lang 双属性同步设置。只加 dir="rtl" 不设 lang="ar"，Safari 中输入框光标移动错乱、数字格式异常、text-align: start 对 <input> 失效 —— 这些都不是 CSS 问题，而是浏览器排版上下文没建立完整。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
