CSS 逻辑属性 Logical Properties
CSS逻辑属性：用inline/block替代物理方向left/right/top/bottom、margin-inline/padding-block/border-inline-start、国际化RTL布局自动适配、与物理属性对比 · 难度：入门 · +10XP
CSS 逻辑属性 —— 告别 left/right，拥抱 inline/block
以前写CSS，我们要用 margin-left、padding-right、border-top 这些物理方向属性。但如果网站要支持阿拉伯语（从右到左），这些写死了方向的属性就会出问题。CSS 逻辑属性（Logical Properties）就是来解决这个的。
物理 vs 逻辑 —— 一张表看懂
| 物理属性（旧） | 逻辑属性（新） | 含义 |
|---|---|---|
| margin-left | margin-inline-start | 行内方向起始边距 |
| margin-right | margin-inline-end | 行内方向结束边距 |
| padding-top | padding-block-start | 块方向起始内边距 |
| padding-bottom | padding-block-end | 块方向结束内边距 |
| border-left | border-inline-start | 行内方向起始边框 |
| border-right | border-inline-end | 行内方向结束边框 |
记住两个核心概念：inline = 文字排列方向（中文是水平）、block = 段落堆叠方向（从上到下）。
实际代码示例
.card {
/* 旧写法 */
margin-left: auto;
margin-right: auto;
padding-top: 20px;
padding-bottom: 20px;
border-left: 3px solid blue;
/* 新写法：逻辑属性 */
margin-inline: auto; /* 左右自动边距 = 水平居中 */
padding-block: 20px; /* 上下内边距 */
border-inline-start: 3px solid blue; /* 起始侧边框 */
}
当你把网页的语言方向从 ltr 改成 rtl 时，逻辑属性会自动翻转！左边框变成了右边框，完全不需要额外代码。
动手练习
- 基础练习：用逻辑属性重写一个卡片布局。把所有 margin-left/right 改为 margin-inline，padding-top/bottom 改为 padding-block，在 ltr 和 rtl 两种方向下测试效果。
- 进阶应用：做一个支持中英文和阿拉伯语三语切换的小页面。切换语言时只需要改 html 标签的 dir 属性，其他布局全靠逻辑属性自动适配。
- 项目实战：审核你之前做过的项目CSS代码，找出所有可以用逻辑属性替换的物理属性（left/right/top/bottom方向性的），做一次国际化升级。
接下来学什么？
下一课学习 color-scheme 颜色方案——一行CSS让网页自动适配系统的暗黑模式。