先记住这个答案
在默认的横排、从左到右书写模式中，margin-left 对应 margin-inline-start，padding-right 对应 padding-inline-end，margin-top 对应 margin-block-start。但这只是当前书写模式下的映射；direction: rtl 会交换行内起点与终点，竖排还会改变行内轴所在方向。逻辑属性描述的是“文字从哪里开始、块从哪里开始”，不是给 left 换一个永远同义的名字。
inline-start指文字流开始的一边block-start指块流开始的一边- 左右映射会随
direction改变 - 竖排时行内轴可能变成上下方向
先分清行内轴和块级轴
读一行横排中文时，文字沿水平方向走，这是行内轴；下一行向下推进，这是块级轴。在常见的横排、从左到右模式下，行内起点在左，块级起点在上。把文本方向改为从右到左，行内起点就跑到右侧，但块级起点仍在上方。
.card {
margin-inline-start: 1rem; /* 文字起点留白 */
padding-inline-end: 2rem; /* 文字末端留白 */
margin-block-start: 1.5rem; /* 块流起点留白 */
}
.rtl-panel { direction: rtl; }同一个 .card 在普通面板里，第一条相当于左外边距；放进 .rtl-panel 后，第一条转而作用在右侧。padding-inline-end 则从右侧转到左侧。这比为两种文字方向各写一套左右规则更容易维护，但前提是设计本来就想表达“起点”和“终点”。
常见映射怎么记
在横排、从左到右的前提下，margin-left 对应 margin-inline-start，margin-right 对应 margin-inline-end；上、下外边距分别对应 margin-block-start 和 margin-block-end。padding、border、定位用的 inset 也有同样的行内和块级方向写法。尺寸方面，width 对应 inline-size，height 对应 block-size，但竖排时两条轴会交换物理方向。
不要把所有带 left 的写法无脑替换。比如一个悬浮按钮规定永远距视口左边 16 像素，这里的“左”是物理位置，保留 left 更准确。背景图像、阴影偏移、旋转角度等也不都能套进一组 inline-start 属性名里；要先查具体 CSS 属性是否提供逻辑版本，再看设计是否希望随文字方向翻转。
混用物理属性时怎样排查
margin-left 与当前映射到左侧的逻辑边距最终会竞争同一条边。如果选择器权重、来源和重要性相同，后声明的可能覆盖前声明的效果。调试时不能把它们理解为“两份会相加的间距”，应在开发者工具里查看最终计算样式，并切换 direction 与 writing-mode 观察映射是否改变。
组件库迁移时先处理语义明确的地方，比如列表项的“文字起点缩进”。固定靠左的品牌标记、角标和画布坐标则保留物理属性。这样切换阿拉伯语等从右到左界面时，内容流能自然翻转，而那些确实固定在屏幕边上的元素不会意外移动。
容易答错的地方
- 说
margin-inline-start永远等于margin-left - 只有在相应书写模式和文字方向下才成立。横排右到左时，行内起点在右边；竖排时，行内方向还可能落在上下两边。回答映射前要说清楚
writing-mode和direction。 - 把逻辑属性当成响应式断点
- 逻辑属性跟随内容流方向，不是根据屏幕宽度自动切换布局。窄屏布局是否变成单列，仍由容器、布局规则或媒体查询决定。两者可一起用，但解决的问题不同。
面试官还会怎么问？
padding-left 在横排右到左时对应什么？
左侧变成行内末端，因此对应 padding-inline-end。如果设计要的是“文字开始前留白”，应写 padding-inline-start，它此时实际落在右侧。
width 和 height 也有逻辑版本吗？
有。inline-size 沿行内轴测量，block-size 沿块级轴测量。横排时通常分别对应宽和高；竖排时行内轴转向垂直方向，物理对应关系也会变化。
margin-inline 是两个值时怎么分配？
第一个值给 inline-start，第二个值给 inline-end。只写一个值则两边相同。这比记“左值、右值”更稳，因为实际左右顺序会随书写方向改变。
参考资料
示例用于理解所注明的运行环境与边界；延伸学习可结合原文中的更多案例。