最常见原因是未确认 writing-mode 和 direction 上下文；margin-inline 按逻辑流向动态映射，需检查计算值、方向设置、display 类型及宽度是否明确。
margin-inline 为什么加了没反应
最常见原因是：你没确认当前元素的 writing-mode 和 direction 上下文。它不是“默认左右”，而是按逻辑流向动态映射——如果父容器设了 writing-mode: vertical-rl，margin-inline-start 就指向顶部；如果页面用了 dir="rtl" 但没生效，那它就还是等价于 margin-left。
排查要点：
- 打开开发者工具，看目标元素的 Computed 面板里
margin-inline-start和margin-inline-end的最终计算值是否符合预期 - 检查父级或根元素是否设置了
dir="rtl"或 CSS 中的direction: rtl - 确认元素是块级（
display: block或inline-block），margin-inline: auto在display: inline上无效 - 注意
overflow: hidden或contain: layout不影响计算值，但可能截断视觉表现
margin-inline: auto 为什么不居中
margin-inline: auto 不是 margin: 0 auto 的逻辑版替代品。它只在两个条件同时满足时才触发居中行为：
- 元素必须是块级（
display: block或inline-block） - 元素必须有明确宽度（
width、max-width，或内容撑出的固有宽度，比如图片）
错误示例：div { margin-inline: auto; } —— 若没设 width，且是默认 display: block，它会占满父容器，auto 直接退化为 0。
对比：margin: 0 auto 是物理简写，隐含作用于行内方向；margin-inline: auto 只管逻辑内联轴，对 margin-block-start 或 margin-top 完全无影响。
什么时候该用 margin-inline 而不是 margin-left/margin-right
只有当 direction 或 writing-mode 是设计变量时，margin-inline 才不可替代：
- 你在写支持阿拉伯语（
direction: rtl）和英文（direction: ltr）的组件库，按钮组右侧间距需统一 → 用margin-inline-end: 8px，切方向时自动翻转，不用写两套规则 - 纯英文 LTR 页面用它，效果和
margin-left/margin-right几乎一样，但可读性下降，反而增加理解成本 - 仅需居中一个块级元素？继续用
margin: 0 auto—— 兼容性更好（IE 都认），语义更直接 - 配合
dir="rtl"使用的通用类（如.spacing-s）必须改，否则 RTL 下布局错位
如何安全替换现有 margin-left 类型代码
不能简单字符串替换。逻辑属性依赖上下文一致性，单点修改容易引发错位：
-
margin-left和margin-right必须成对换成margin-inline-start和margin-inline-end - 简写
margin: 10px 20px 10px 20px不能直接改，应拆为margin-block: 10px+margin-inline: 20px - 旧版 Safari（14.0 以下）不支持四值
margin-inline: 1rem 2rem 3rem 4rem，只认单值或双值形式 - 若需兼容 IE11 或 Safari 12.1 以下，建议用 PostCSS 插件（如
postcss-rtlcss）生成双份规则，或用类名钩子（如.rtl .button）兜底
真正难的不是写对一个 margin-inline-start，而是确保整个组件树的方向上下文一致，且降级后仍可读、可交互。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
