CSS 逻辑属性
CSS 逻辑属性使用流向相对方向（inline / block）代替物理方向（left / right / top / bottom），使布局在 LTR 和 RTL 书写模式下均能正常工作。
外边距 margin
| 物理属性 | 逻辑属性 | LTR 对应 | RTL 对应 |
|---|---|---|---|
| margin-top | margin-block-start | margin-top | margin-top |
| margin-bottom | margin-block-end | margin-bottom | margin-bottom |
| margin-left | margin-inline-start | margin-left | margin-right |
| margin-right | margin-inline-end | margin-right | margin-left |
内边距 padding
| 物理属性 | 逻辑属性 |
|---|---|
| padding-top | padding-block-start |
| padding-bottom | padding-block-end |
| padding-left | padding-inline-start |
| padding-right | padding-inline-end |
边框 border
| 物理属性 | 逻辑属性 |
|---|---|
| border-top | border-block-start |
| border-bottom | border-block-end |
| border-left | border-inline-start |
| border-right | border-inline-end |
尺寸与定位
| 物理属性 | 逻辑属性 |
|---|---|
| width | inline-size |
| height | block-size |
| min-width | min-inline-size |
| max-width | max-inline-size |
| min-height | min-block-size |
| max-height | max-block-size |
| top | inset-block-start |
| bottom | inset-block-end |
| left | inset-inline-start |
| right | inset-inline-end |