应优先使用 margin-inline 而非 margin-left/right 于多语言、多书写模式场景，因其依 direction 和 writing-mode 动态映射方向；纯 LTR 英文页用它无实质优势，反而降低可读性。
margin-inline 不是“HTML 做法”，而是 CSS 属性，必须写在 style 或样式表里；它不依赖 HTML 标签类型，但依赖元素的书写模式（writing-mode）和文本方向（direction）。
什么时候该用 margin-inline 而不是 margin-left/margin-right
当你需要水平方向的外边距，且页面要支持多语言（比如阿拉伯语 direction: rtl 或蒙古文竖排 writing-mode: vertical-ml）时，margin-inline 才真正有意义。纯英文 LTR 页面用它，效果和 margin-left/margin-right 几乎一样，但失去了物理属性的直观性，反而增加理解成本。
- 仅需居中一个块级元素？继续用
margin: 0 auto—— 它更通用、兼容性更好（IE 都认） - 按钮组需要统一右侧间距？用
margin-inline-end: 8px比margin-right: 8px更健壮，尤其当整个容器切direction: rtl时 - 你正在写组件库或设计系统？逻辑属性能减少方向相关的条件样式，值得提前约定
margin-inline 的取值和常见误用
它接受两个值（start 和 end）、一个值（start = end），或 auto。但注意：auto 在 margin-inline 中**不会触发居中行为**，除非配合明确宽度 + 块级显示（display: block），这点和 margin: 0 auto 不同。
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
-
margin-inline: 12px→ 等效于margin-inline-start: 12px; margin-inline-end: 12px; -
margin-inline: 4px 16px→ start=4px，end=16px（顺序固定，不可颠倒） -
margin-inline: auto→ 仅当元素是块级且有宽度时，才可能水平居中；否则表现等同于0 - 错误写法：
margin-inline: 10px 20px 30px—— 它不支持三值语法，会直接失效
为什么加了 margin-inline 却没反应
最常被忽略的是：逻辑属性的“方向映射”由父级或自身 writing-mode 和 direction 决定，而不是浏览器默认设置。如果你只写了 margin-inline: 20px，但没确认当前上下文的流向，那它可能正作用在“顶部/底部”而非你预期的“左右”。
立即学习“前端免费学习笔记（深入）”；
- 检查父容器是否设置了
writing-mode: vertical-rl—— 此时margin-inline-start实际对应顶部，margin-inline-end对应底部 - 检查是否用了
direction: rtl但忘了text-align: right或其他视觉对齐，导致“看起来没动” - 元素是
inline（如<span>）？margin-inline仍生效，但垂直方向的布局推挤效果受限——需配合display: inline-block或block才明显 - 开发者工具里看 computed 样式，确认
margin-inline-start和margin-inline-end的最终计算值是否符合预期
逻辑属性真正的复杂点不在语法，而在“流向依赖”——它让样式和文档结构耦合得更紧。一个没设 direction 的页面，margin-inline 就只是个更绕的 margin-left/margin-right 别名；只有当流向成为设计变量时，它才开始发挥价值。
