当处理沿文本流方向的间距（如按钮组水平排列、表单控件间水平空隙、卡片网格列间隔）时，应使用margin-inline而非margin-left/margin-right，因其在LTR下等效于左右边距，在RTL下自动映射为起始/结束侧，无需[dir="rtl"]规则。
什么时候该用 margin-inline 而不是 margin-left/margin-right
当你处理的是沿文本流方向的间距时——比如按钮组水平排列、表单控件之间的水平空隙、卡片网格的列间隔——margin-inline 就是正确选择。它在 LTR 下等效于 margin-left: 16px; margin-right: 16px，在 RTL 下自动映射为右侧起始、左侧结束，无需额外 [dir="rtl"] 规则。
常见错误包括：
- 给绝对定位元素设
margin-inline: 20px，它不影响left/right偏移，只参与 layout flow 计算 - 误以为
margin-inline会翻转transform: translateX()方向，其实不会 - 在非文本流上下文中强行替换物理属性，比如侧边栏固定宽度布局中用
inline-size代替width，反而增加理解成本
margin-block-start 的“顶部”为什么有时在底部？
它的物理位置由 writing-mode 决定，不是 direction。默认 writing-mode: horizontal-tb（横排从上到下）时，margin-block-start ≈ margin-top；但若设了 writing-mode: vertical-rl（竖排从右到左，如传统中文古籍），块流变成从上到下 → 此时 margin-block-start 还是顶部；而 writing-mode: vertical-lr（竖排从左到右）时，块流从下到上，margin-block-start 就落在底部。
绝大多数网页不需要改 writing-mode，所以 margin-block 可安全当上下边距用；但如果你在做电子书阅读器或古籍展示，必须显式检查当前 writing-mode 值，否则 margin-block-start 会出现在意料之外的位置。
立即学习“前端免费学习笔记（深入）”；
现代商业数字化服务公司网站模板是一款提供数字营销、品牌包装、内容创作和网页设计等数字化商业服务公司宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。
如何安全降级兼容不支持逻辑属性的旧浏览器
别依赖 PostCSS 自动补全，手动控制更可靠。用 @supports 包裹逻辑写法，再在外层写物理 fallback：
.card {
margin-inline: 16px;
}
@supports not (margin-inline: 16px) {
.card {
margin-left: 16px;
margin-right: 16px;
}
[dir="rtl"] .card {
margin-left: 16px;
margin-right: 16px;
}
}
注意：@supports 检测必须写完整声明，例如 @supports (margin-inline: 16px)，不能只写 @support。
text-align: start 为什么比 text-align: left 更适合多语言场景
text-align: start 会根据当前 direction 或 writing-mode 自动映射到起始边缘：LTR 下是左对齐，RTL 下是右对齐，vertical-rl 下是顶部对齐。它不依赖页面全局 dir 属性，也不需要为每种语言单独写规则。
关键限制：
- 仅对块级容器内行内内容生效，对 flex/grid 子项无效（需用
justify-content: start） - 不适用于
position: absolute元素的left/right对齐逻辑 - 如果父容器未设置
direction或writing-mode，浏览器按默认ltr解析，start就等同于left
真正容易被忽略的是：逻辑属性不是“自动适配所有布局”，它只在文本流方向明确、且 layout mode 与书写模式一致的场景下才可靠；一旦混用 transform、float 或老式 table 布局，行为就可能偏离预期。
