CSS逻辑属性需显式设置dir或writing-mode才能生效，否则margin-inline等仍按LTR解析；必须成对替换width/height为inline-size/block-size，且仅适用于流式布局。
直接用 margin-inline、padding-block 和 text-align: start，就能让同一套 CSS 在 LTR（如英语）和 RTL（如阿拉伯语）页面中自动适配边距、内边距与对齐方向——前提是根元素有 dir 属性，且不混用物理尺寸属性。
为什么 margin-inline 在 RTL 下没生效？
它不是“自动翻转”，而是依赖文档的逻辑起点。没有 dir="rtl"（或局部 direction: rtl），浏览器就默认按 LTR 解析 inline-start，此时 margin-inline-start 仍等价于 margin-left。
- 必须在
或至少根容器上显式设置dir；lang属性无效 - 嵌入的 LTR 片段（如 URL、代码块）要用
<bdo dir="ltr"></bdo>包裹，否则双向算法会干扰逻辑属性计算 - JS 动态插入内容后，若未同步设置
dir，margin-inline-end不会重生效；可临时触发重排，例如修改element.style.opacity = 0.99
inline-size 和 block-size 替换 width/height 的硬性条件
只改 margin 类属性而保留 width/height，在 writing-mode: vertical-rl 等场景下会直接崩：此时 width 控制的是视觉上的上下方向，height 反而控制横向文字流宽度，导致 padding/border 加错轴向。
- 必须成对替换：
width → inline-size、height → block-size，不能混用 - 搭配
box-sizing: border-box才能保证padding-inline和border-inline被正确纳入尺寸计算 - Safari ≤15.6 会忽略
border-inline，需用@supports降级（见下节）
如何安全降级到不支持逻辑属性的旧浏览器
别指望 PostCSS 插件自动补全——它无法判断你是否已设 dir 或 writing-mode，容易生成错误的物理 fallback。
为跨境电子商务生成多语言、SEO 优化的产品描述。支持英语、西班牙语、俄语和阿拉伯语，并针对不同搜索引擎（Google / Bing、Yandex、中东市场）进行专项 SEO 优化。适用于以下场景：用户需为国际市场创建符合 SEO 规范的产品文案、批量生成产品描述，或针对特定搜索引擎及区域用户偏好优化内容。
立即学习“前端免费学习笔记（深入）”；
- 手动用
@supports包裹逻辑写法，并在外层写物理 fallback：
.card {
margin: 16px 8px; /* fallback */
}
@supports (margin-inline: 16px) {
.card {
margin-block: 16px;
margin-inline: 8px;
}
}- 注意：
@supports检测的是属性名存在性，不是行为正确性；Safari 15.4 支持margin-inline但不支持border-inline，需单独检测 - 对关键布局组件（如导航栏、表单控件），建议在真实 RTL 环境中完整回归测试，而不是仅靠 DevTools 切换
dir
哪些场景坚决不能用逻辑属性？
逻辑属性本质是为“文本流内布局”服务的，一旦脱离流式上下文，它的语义就失效了。
- 绝对定位元素：
inset-inline-start: 20px不等于left: 20px；它只参与 layout flow 计算，不影响最终渲染位置 - Flex/Grid 主轴尺寸控制：不要对子项单独设
inline-size来“调宽度”，优先用flex-basis或min-inline-size - 固定侧边栏、Canvas 容器等非流式布局：强行用
inline-size代替width，反而增加团队理解成本
真正麻烦的不是写错一个 padding-inline，而是写了十个 margin-left 后才发现：只要改 dir，所有间距、圆角、边框都得重测一遍。逻辑属性的价值不在语法新潮，而在把方向耦合从样式层彻底抽离——但这个抽离，只在你严格遵循书写模式与流式前提时才成立。
