你以为 width 是 CSS 默认值？今天它被逻辑属性彻底重新定义了

写了几年 CSS，你大概觉得 width、margin-left、padding-top 是「默认值」——所有元素都按这套逻辑排列。但仔细想想，这三个属性名描述的是什么？屏幕左边缘、屏幕顶边缘、横向占满。

这就是物理属性：永远相对于屏幕坐标去定位。问题在于，全世界不是只有「左到右、从上到下」这一种书写方式。

逻辑属性的核心思路

CSS 逻辑属性（Logical Properties）用两个轴替代了物理方向：

• inline 轴：文字流动的方向。英语从左到右，阿拉伯语从右到左。
• block 轴：块级元素堆叠的方向。英语是从上到下，日语竖写是从右到左、从上到下。

对应的映射关系是这样的：

以 RTL（从右到左）语言为例，margin-inline-start 在英语页面里等于 margin-left，切到阿拉伯语页面里自动变成 margin-right。CSS 引擎帮你把这个映射做了，你不需要写一行 RTL override。

实际效果是什么样的

英语（dir="ltr"）下：

.card {
  margin-inline-start: 24px;   /* 左侧 24px */
  padding-inline-end: 16px;  /* 右侧 16px */
  border-inline-start: 2px;   /* 左边框 */
}

阿拉伯语（dir="rtl"）下：
同一段 CSS，margin-inline-start 立即变成「右侧 24px」，border-inline-start 变成「右边框」。不需要任何覆盖规则，不需要 body[dir="rtl"] 条件分支。

为什么这个时间点值得聊

CSS 逻辑属性不是新东西——Chrome/Firefox/Safari 从 2019 年就开始支持了。但 2024 年之后，核心属性全面稳定，新增的逻辑版 border-radius（border-start-start-radius）和 overflow-inline / overflow-block 也进入所有主流浏览器，全球覆盖率超过 96%。

换句话说：你现在在生产环境用，不需要 polyfill，不需要降级策略。

三步上手路径

第一步：找出一个 RTL 高相关组件
典型场景：侧边栏导航、卡片列表、表单标签。从这几个开始，把 margin-left / margin-right 替换成 margin-inline-start / margin-inline-end。

/* 之前 */
.sidebar { margin-left: 240px; }

/* 之后 */
.sidebar { margin-inline-start: 240px; }

第二步：把 width / height 换成 inline-size / block-size
这一步更直观。inline-size 在横排文本里等于 width，切到竖排书写模式自动等于 height。

/* 之前 */
.thumbnail { width: 200px; height: 150px; }

/* 之后 */
.thumbnail { inline-size: 200px; block-size: 150px; }

第三步：用 DevTools 验证
Chrome DevTools Elements 面板里，选中一个元素，切换 dir 属性为 rtl，观察布局是否自动镜像。如果有没镜像的部分，那就是某处还留了物理属性没替换。

三个需要注意的地方

有些值本来就是物理的。 position: fixed 的 top: 0 如果是指「吸顶」，保留物理属性是对的——吸顶吸的是视口边缘，不是文字流方向。

旧浏览器仍有少量存量。 主要是指 IE。如果你的项目不需要支持 IE，可以直接上，不需要 fallback。如果需要，写物理属性在前、逻辑属性在后，浏览器会忽略不支持的声明。

inline-size 不等于 width 的场景。 在竖排书写模式下，inline-size 控制的是垂直尺寸。如果你的组件在竖排场景下尺寸语义不一样，需要单独处理。

值不值得迁

如果你的产品只服务英语用户，且永远不会有国际化需求，逻辑属性的直接好处有限。但 CSS 的趋势一直是「描述意图而非坐标」——从 Flexbox 的 justify-content 到 Grid 的 start / end，物理坐标正在被逐步替代。

换个角度：你的下一个新组件，用逻辑属性来写，就当是给自己买个「万一要做 RTL」的期权。

• 三步：搜一个现有组件的 margin-left / width → 替换成 margin-inline-start / inline-size → DevTools 切 dir="rtl" 验证。*