CSS逻辑属性
逻辑属性根据书写模式和方向（LTR/RTL）自动适配，使CSS真正国际化。
物理属性 → 逻辑属性对照
| 物理属性（旧） | 逻辑属性（新） | 说明 |
|---|---|---|
| width | inline-size | LTR中为水平 |
| height | block-size | LTR中为垂直 |
| min-width / max-width | min-inline-size / max-inline-size | |
| margin-left | margin-inline-start | RTL中翻转 |
| margin-right | margin-inline-end | |
| margin-top | margin-block-start | |
| margin-bottom | margin-block-end | |
| padding-left | padding-inline-start | |
| padding-right | padding-inline-end | |
| border-left | border-inline-start | |
| top | inset-block-start | |
| left | inset-inline-start | |
| text-align: left | text-align: start | |
| float: left | float: inline-start |
逻辑属性简写
/* inline = horizontal (left/right in LTR) */ margin-inline: 16px; /* = margin-left + margin-right */ padding-inline: 24px 16px; /* start end */ /* block = vertical (top/bottom) */ margin-block: 8px 16px; /* = margin-top + margin-bottom */ padding-block: 12px; /* inset = all sides */ inset: 0; /* = top/right/bottom/left */ inset-inline: 0 auto; /* left=0, right=auto */
RTL布局示例
/* Works for BOTH Arabic (RTL) and English (LTR) */
.nav-item {
padding-inline-start: 16px; /* left in LTR, right in RTL */
border-inline-start: 3px solid var(--primary);
margin-inline-end: 8px;
}
/* Activate RTL */
html[dir="rtl"] { direction: rtl; }