margin-inline-start 失效是因为它依赖页面方向上下文（如 dir="rtl"），未设置时等价于 margin-left，且 RTL 下不自动翻转；必须成对替换方向敏感属性并同步处理降级兼容性。
为什么直接把 margin-left 换成 margin-inline-start 会失效
因为 margin-inline-start 不是“自动翻转的 margin-left”，它依赖页面上下文生效。如果没设 dir="rtl" 或 direction: rtl，它就等价于 margin-left，RTL 下完全不翻转——图标还是被推到屏幕物理左侧，阿拉伯文本首行缩进错位，工具栏按钮堆到右边缘。
常见错误现象：
- HTML 根节点没加
dir="rtl"，但 CSS 写了margin-inline-start: 8px - 只改了部分组件，其他地方仍用
float: left或text-align: left，导致内联顺序断裂 - 没同步设置
lang="ar"，Safari 中contenteditable光标跳转异常、数字渲染错乱
哪些地方必须换，且不能只换单个属性
不是“全局搜索替换”，而是锁定方向敏感节点，且必须成对处理：
- 按钮组间距：
margin-inline-end: 4px替代margin-right: 4px（margin-inline-start用于第一个按钮前留空） -
contenteditable容器内边距：padding-inline-start: 12px确保光标首次进入停在视觉起点（LTR 是左，RTL 是右） - 图标与文字间距：若图标语义上是“操作前缀”，用
margin-inline-end: 6px（RTL 下图标仍在文字左侧），而非margin-inline-start - 段落对齐：
text-align: start必须配套padding-inline-start，否则首行缩进和换行逻辑脱节
简写写法的坑比你想象的多
margin-inline 和 padding-inline 看似方便，但语法限制严格：
立即学习“前端免费学习笔记（深入）”；
-
margin-inline: 8px 12px 16px—— 无效，浏览器忽略整条声明 -
margin-inline: 1rem 2rem 3rem 4rem—— 同样无效，逻辑属性没有四值语法 - 正确写法只有两种：
margin-inline: 1rem（等效于 start/end 都是 1rem）或margin-inline: 1rem 2rem（start=1rem, end=2rem） - 若只需控制起始侧（比如仅按钮图标左侧留空），直接写
margin-inline-start: 6px更安全、更清晰
兼容性降级不能靠 PostCSS 自动补全
旧版 Safari（≤15.3）和安卓 WebView 对逻辑属性支持残缺，且错误静默：
-
margin-inline: 8px 12px在 Safari ≤15.3 中完全不生效，必须拆成margin-inline-start: 8px; margin-inline-end: 12px -
padding-block在 iOS Safari 15.3 及更早版本中不触发重排，DevTools 也看不到计算值，建议双写：padding-block: 10px; padding-top: 10px; padding-bottom: 10px; - 别依赖
@supports (margin-inline: 0)做降级——某些安卓 WebView 会误报支持，实际不渲染；稳妥做法是手动包裹 + 物理 fallback
真正难的不是写对一个 margin-inline-start，而是确保整个组件树的方向上下文一致，且降级后仍可交互、可读——比如按钮文字没被裁切，光标能正常定位，表单控件不重叠。
