margin-inline在rtl下不固定往左或右缩进，而是依据文本流方向：margin-inline-start映射为margin-right，margin-inline-end映射为margin-left；其行为由direction或dir属性决定，非浏览器语言设置。
margin-inline 在 RTL 下到底往哪边缩进？
它往文字起始方向缩进，不是固定“左边”。LTR（如中文、英文）下 margin-inline-start 对应左，RTL（如阿拉伯语、希伯来语）下则自动映射到右。直接写 margin-inline: 1rem 相当于同时设 margin-inline-start: 1rem 和 margin-inline-end: 1rem，两边都缩进，和方向无关。
常见错误是以为 margin-inline-start 总是“左边”，结果在 RTL 页面里内容被挤出视口右侧。真正起作用的是书写方向（dir 属性或 direction CSS），不是浏览器语言或系统设置。
- 确保根元素或容器有明确的
dir="rtl"，否则margin-inline-start不会切换行为 - 不要用
margin-left+dir="rtl"混用——这会导致 RTL 下左右逻辑冲突 - 调试时用浏览器 DevTools 查看 computed 样式，确认
margin-inline-start实际解析成了margin-right还是margin-left
padding-block 能不能替代 top/bottom？
能，而且更语义化。padding-block 始终作用于块轴方向：垂直排版时是上下，水平排版（默认）时也是上下。它不随 writing-mode 改变“上下”的物理含义，只随块流方向变化。
例如：writing-mode: vertical-rl 时，块轴变成水平方向，此时 padding-block-start 就会作用在右边缘（即块起始侧），而非顶部。
-
padding-block是 shorthand，等价于padding-block-start+padding-block-end - 若需兼容老浏览器（如 IE 或旧版 Safari），需保留
padding-top/padding-bottom回退，并用@supports隔离新属性 - 注意：Firefox 69+、Chrome 87+、Safari 14.1+ 支持完整逻辑属性，但 Safari 对
writing-mode+padding-block组合偶有渲染延迟，建议加will-change: padding-block触发优化
RTL 场景下 margin-inline 和 text-align 冲突怎么办？
冲突根源在于：两者都依赖 dir，但 text-align: start 是对齐文本行，margin-inline-start 是定位盒子边缘——它们在 RTL 下都向右“生效”，但可能造成视觉叠加或空白错位。
典型现象：按钮文字右对齐了，但外边距却让整个按钮又往右偏移一截，看起来像悬空。
- 优先用
text-align: start控制内联内容，用margin-inline-start控制布局位置，二者目的不同，不要强行统一数值 - 若需“文字贴右 + 容器右留白”，应设
text-align: right（显式物理值）+margin-inline-end: 1rem（逻辑值），避免双重右偏 - Flex/Grid 布局中，
justify-content: flex-start在 RTL 下也自动右对齐，此时再加margin-inline-start就容易过度偏移
如何检测逻辑属性是否生效？
最直接的方式是手动切换 dir 并观察渲染变化，而不是靠 JS 判断语言环境。CSS 逻辑属性不读取 navigator.language，只响应 DOM 的 dir 属性或继承的 direction 值。
一个轻量级验证方法：
body[dir="rtl"] .card {
margin-inline-start: 2rem; /* 应该表现为 margin-right */
}
body[dir="ltr"] .card {
margin-inline-start: 2rem; /* 应该表现为 margin-left */
}
如果两者表现一致，说明没生效——大概率是父元素没传 dir，或用了 !important 覆盖了逻辑属性的计算值。
- 检查 computed 样式中
margin-inline-start是否显示为margin-left或margin-right，而不是 “not set” - 避免在 reset.css 中用
* { margin: 0 }全局覆盖，它会清掉所有逻辑属性的初始值 - Next.js / Vue 等框架中，服务端渲染时若未同步注入
dir，首屏可能按 LTR 渲染，再 JS 切换导致闪动——必须 SSR 阶段就确定dir
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
