先记住这个答案
writing-mode 会改变行内轴与块轴落在屏幕的哪个方向，direction 还会影响行内起点。组件若表达“文字起点留空”，写 margin-inline-start 才能跟随不同语言与书写模式；margin-left 永远只管物理左边。切到竖排后仍靠左右边猜语义，很容易把装饰线和留白放错位置。
writing-mode改变布局轴向- 逻辑边距跟随书写方向
margin-left永远是物理左侧- RTL 还会改变行内起止
竖排侧注释为何跑错边
文章侧边注释在普通中文横排时位于正文左侧，换成竖排版式后希望仍位于块方向起始侧。若继续写 margin-left，它只是继续占用物理左边，不会跟着书写方向移动。改用 margin-block-start 表达相对于块轴起点的间距，再根据设计核对容器排列。中文竖排与繁体中文地区的普通横排是两件事，不应仅凭语言地区推断 writing-mode。
.note {
margin-block-start: 1rem; /* 跟随块轴起点 */
padding-inline: 0.5rem; /* 行内方向两侧留白 */
}
.vertical { writing-mode: vertical-rl; }
/* 同一逻辑边距在竖排时映射到不同物理侧 */在常见横排、从左到右书写中，行内起点通常对应左，块起点通常对应上；vertical-rl 下行内轴变为竖向，块方向从右往左。
逻辑属性跟随行内轴和块轴
direction 还会影响行内起止方向。逻辑属性把“从文字起点留白”与具体左、右、上、下解耦，但已有物理属性若同时设置同一映射边，最终值仍由 CSS 级联决定。迁移时应在多种书写模式和语言方向下逐项检查。
例如把一条强调线放在段落的“开头”：中文横排时是左边，阿拉伯语横排时可能是右边，竖排时又可能变成上边。若写死 border-left，切换书写模式后线仍在物理左侧，和文字起点分离；用 border-inline-start 才表达原意。并非所有边都要改为逻辑属性，固定贴屏幕左侧的工具栏仍应按物理位置设计。
在 Flexbox 和 Grid 中，start、end 等对齐词也要结合相关轴理解，不能把“起点”一律想成页面左边。组件若同时支持 RTL 和竖排，应把文本、边距、边框与图标方向一起检查；单改一个 margin-left 可能让留白对了，箭头却仍指反方向。物理边与逻辑边混用时，从计算样式和实际书写模式出发查更可靠。
容易答错的地方
- 认为繁体中文地区一定竖排
- 语言地区不决定 CSS 书写模式，网页仍可使用普通横排。
- 同时写逻辑和物理边距却忽略级联
- 两条声明可能映射到同一物理边，谁生效仍取决于优先级与顺序。
面试官还会怎么问？
横排 RTL 中 margin-inline-start 在哪里？
行内起点通常在右侧，它会映射到相应物理边。
vertical-rl 会影响 Flex 的 row 吗？
会。row 沿行内轴排列，竖排时主轴可变成纵向。
逻辑属性能替代所有物理属性吗？
当需求真是物理方向，例如固定贴屏幕左边，物理属性仍有意义；语义方向优先用逻辑属性。
参考资料
示例用于理解所注明的运行环境与边界；延伸学习可结合原文中的更多案例。