先记住这个答案
CSS 物理属性如 margin-left 固定指屏幕左边；逻辑属性如 margin-inline-start 指行内起点，会随 direction 与 writing-mode 映射到不同物理边。做支持 RTL 或竖排的组件时，逻辑属性让“标题前留空”这样的意图保持一致，不必为每种方向逐个交换左右和上下。
- 逻辑属性按行内轴和块轴命名
inline-start会随文字方向变化- 物理属性始终指固定边
- 混用同一边的声明要检查层叠
从按钮图标的间距理解
按钮里图标位于文字之前，图标后需要留一点距离。写死 margin-right 在横排 LTR 看起来对，RTL 时图标后方可能变成左边。使用行内结束边表达“图标之后”的间距，更符合排版意图。
.button__icon { margin-inline-end: 0.5rem; }
.card { padding-inline: 1rem; padding-block: 0.75rem; }
.card__title { border-inline-start: 3px solid currentColor; }margin-inline-end 在横排 LTR 对应右边，在 RTL 对应左边。padding-inline 一次设置行内两侧；border-inline-start 把强调线放在文本起始侧。组件换方向时不用维护第二份镜像样式。
writing-mode 改成竖排后，行内轴转向物理垂直方向，逻辑边的映射会继续变化。因此“逻辑属性就是自动交换 left 和 right”仍说得太窄。
物理与逻辑声明别无意混用
同一个盒子既写 margin-left 又写 margin-inline-start，在某些书写方向下两者可能指向同一物理边。最终结果由 CSS 层叠和声明顺序决定，容易让 RTL 或竖排出现难查的差异。
迁移旧组件时逐个检查对应边，再决定是否需要保留物理写法。背景图定位、固定在屏幕角落的浮层等需求本来就可能按物理方向定义，不必把所有 left 都机械替换成 inline-start。
逻辑属性迁移时，最容易漏的是“起点”不总在左边。横排 RTL 的行内起点在右，而竖排 vertical-rl 的块起点又在物理右侧；同一个卡片的强调线可能从左边移到右边或顶部。把页面临时设成 RTL，再换成竖排预览一次，比只阅读属性名更容易发现旧的 margin-left 与新的 margin-inline-start 叠在同一边。
容易答错的地方
- 以为逻辑属性只是 RTL 左右互换
- 它还考虑书写模式，竖排时行内与块轴映射会变化。
- 同时写物理和逻辑属性却不检查覆盖
- 两条声明可能落到同一边，结果受层叠影响；应明确哪条规则负责最终边距。
面试官还会怎么问？
padding-inline 两个值分别对应什么？
依次对应行内起点和终点，映射到实际物理边取决于文字方向与书写模式。
竖排时 inline-size 是宽度吗？
不一定。它是行内轴尺寸，竖排时通常映射到物理高度。
什么时候继续用 left？
当设计意图就是固定在屏幕物理左侧，例如某些全屏装饰定位时，物理属性反而更准确。
参考资料
示例用于理解所注明的运行环境与边界；延伸学习可结合原文中的更多案例。