逻辑属性根据内容的流向(开始/结束、inline/block)而不是物理方向(左/右/上/下)来描述布局。这使单个样式表能自动适配从右到左书写的语言(阿拉伯语、希伯来语)或从上到下书写的语言。
物理属性与逻辑属性
css
{ : ; : ; : left; : solid; }
{
: ;
: ;
: start;
: solid;
}
margin-inline: 1rem; /* left + right in LTR (both inline sides) */
margin-block: 2rem; /* top + bottom */
margin-inline-start: 1rem; /* the "start" inline edge (left LTR / right RTL) */
padding-block-end: 1rem; /* bottom in horizontal writing */
inset-inline-start: 0; /* logical version of left/right for positioning */
使用物理属性,支持阿拉伯语意味着要在 [dir="rtl"] 后面编写整个镜像样式集(margin-left → margin-right,等等)。使用逻辑属性,相同的 CSS 就能工作 — 在 html 上设置 dir="rtl",margin-inline-start 会自动翻转到右侧:
<html dir="rtl"> <!-- the entire layout mirrors correctly, no CSS changes -->
逻辑属性还能处理竖直书写模式(例如某些东亚排版),并使 margin-inline: auto 成为一种无论方向如何都能居中的清晰方式。
对于任何在多种语言中发布的产品,逻辑属性消除了维护镜像 RTL 样式表的需要 — 一套规则能适应书写方向。
即使对于仅支持 LTR 的网站,它们也提供了更清晰的思维模式(开始/结束、inline/block),并且在现代 CSS 中越来越成为推荐的默认方式。