第十一章 · 11.2 节

逻辑属性与逻辑值

6.1 节学过的 margin-top、width 等属性，都是基于屏幕的物理方向（上下左右）描述的。但 CSS 从一开始就要支持竖排文字、从右到左书写的语言（阿拉伯语、希伯来语）——逻辑属性用"流的方向"取代"物理方向"，让同一份样式在不同书写模式下都能正确工作。

block 轴与 inline 轴

逻辑属性不再说"上下左右"，而是说两个抽象的轴：

block 轴：文字排列前进的方向。横排文字（如中文、英文横排）中，block 轴是竖直方向，对应物理上的"上/下"。
inline 轴：同一行内文字排列的方向。横排文字中，inline 轴是水平方向，对应物理上的"左/右"（从左到右或从右到左取决于语言）。

逻辑属性用 block-start / block-end / inline-start / inline-end 代替 top / bottom / left / right：

.card {
  margin-block-start: 16px;   /* 通常等价于 margin-top */
  margin-inline-end: 8px;     /* 通常等价于 margin-right（LTR 语言下） */
  padding-inline: 20px;      /* 简写：inline-start + inline-end */
  border-inline-start: 3px solid teal;
}

物理属性对照表

物理属性	逻辑属性（LTR 横排下等价）
width / height	inline-size / block-size
margin-top / bottom / left / right	margin-block-start / block-end / inline-start / inline-end
padding-left / right	padding-inline-start / inline-end（简写 padding-inline）
top / left（配合 position）	inset-block-start / inset-inline-start（简写 inset-block / inset-inline）
border-left	border-inline-start
text-align: left	text-align: start

书写模式切换示例

逻辑属性的价值在切换 direction 或 writing-mode 时最直观——不用改一行 CSS，布局就能自动适配：

DEMO · 相同的 margin-inline-start，在 LTR 与 RTL 下方向自动翻转

LTR：缩进在左

RTL：缩进自动到右

什么时候该用

建议如果项目明确只面向从左到右横排的语言（例如纯中文站点），继续用物理属性完全没问题，代码可能更直观；但如果项目可能需要国际化，或者你在写组件库/公共样式，优先使用逻辑属性，能省掉一整套 [dir="rtl"] 覆盖规则。