第十一章 · 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"] 覆盖规则。

Chapter 11 · Section 11.2

Logical Properties and Logical Values

The properties learned in Section 6.1, such as margin-top and width, describe the physical directions of the screen (top/bottom/left/right). But CSS had to support vertical text and right-to-left languages (Arabic, Hebrew) from the start — logical properties replace "physical direction" with "flow direction", so the same styles work correctly in every writing mode.

The Block Axis and the Inline Axis

Logical properties no longer talk about "top/bottom/left/right", but about two abstract axes:

block axis: the direction in which text advances. In horizontal writing (such as Chinese or English set horizontally), the block axis is vertical, mapping to physical "top/bottom".
inline axis: the direction in which text runs within a line. In horizontal writing, the inline axis is horizontal, mapping to physical "left/right" (left-to-right or right-to-left depending on the language).

Logical properties use block-start / block-end / inline-start / inline-end instead of top / bottom / left / right:

.card {
  margin-block-start: 16px;   /* usually equivalent to margin-top */
  margin-inline-end: 8px;     /* usually equivalent to margin-right (in LTR languages) */
  padding-inline: 20px;      /* shorthand: inline-start + inline-end */
  border-inline-start: 3px solid teal;
}

Physical-to-Logical Property Reference

Physical property	Logical property (equivalent in LTR horizontal writing)
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 (shorthand padding-inline)
top / left (with position)	inset-block-start / inset-inline-start (shorthand inset-block / inset-inline)
border-left	border-inline-start
text-align: left	text-align: start

Example: Switching Writing Modes

The value of logical properties is most obvious when you switch direction or writing-mode — without changing a single line of CSS, the layout adapts automatically:

DEMO · the same margin-inline-start flips direction automatically between LTR and RTL

LTR: indent on the left

RTL: indent automatically moves to the right

When to Use Them

RecommendationIf a project clearly targets only left-to-right horizontal languages (for example, a Chinese-only site), continuing with physical properties is perfectly fine and the code may even read more directly; but if the project may be internationalized, or you are writing a component library / shared styles, prefer logical properties — they save an entire set of [dir="rtl"] override rules.