先记住这个答案
margin-inline-start、padding-block-start 等逻辑属性中的百分比，基准是包含块的行内尺寸。横排从左到右时，行内尺寸通常就是物理宽度，所以很多示例看起来“百分比都按宽度算”。但改成竖排书写模式后，行内轴会转向物理垂直方向，此时不能继续把宽度当成通用答案。
- 百分比基准是包含块行内尺寸
- 横排通常表现为按宽度计算
- 竖排时行内轴可能对应高度
padding-block也不是按块轴尺寸计算
为什么上下内边距也按行内尺寸算
一个横排容器宽 400px，给子元素设 padding-block-start: 10%，得到的内边距通常是 40px，不是容器高度的百分之十。逻辑属性改变的是所指的边，百分比计算仍沿包含块行内尺寸。
.box { inline-size: 400px; writing-mode: horizontal-tb; }
.box__child { padding-block-start: 10%; margin-inline-start: 5%; }
/* 上内边距约 40px，行内起始外边距约 20px */示例以子元素的包含块行内尺寸为 400px 为前提。实际布局还要看盒模型、父级内边距和包含块尺寸；百分比不是简单拿页面视口宽度相乘。
如果改用 padding-block: 10%，两端值也都以同一行内尺寸为参照，而不是各自去查容器高度。
竖排模式不能继续说宽度
writing-mode: vertical-rl 时，文字沿垂直方向推进，行内尺寸对应物理高度。此时同样的百分比规则仍成立，只是参照轴映射到不同物理方向。direction 还会影响行内起点在上还是下，但不会把基准改成另一条轴。
面试里可以先讲“包含块行内尺寸”，再补充横排下通常是宽度、竖排下可能是高度。这比直接背“百分比 margin 永远按宽度”准确。
不要把这里的“包含块”省略成“父元素”。如果子元素是绝对定位，或外层布局改变了包含块的建立方式，百分比所参照的盒子未必就是肉眼看到的最近包装层。调试 10% 算出来不对时，先在开发工具里确认包含块，再确认其行内尺寸和书写模式；直接拿视口宽度或父元素的边框宽度相乘，容易算错。
容易答错的地方
- 把
padding-block当成按高度计算 - 属性作用在哪条边和百分比以哪条尺寸为基准是两件事。块轴内边距也按包含块行内尺寸计算。
- 把包含块误认成视口
- 普通元素通常相对其包含块计算。只有特定布局条件下包含块才可能与视口对应。
面试官还会怎么问？
margin-inline-start 在 RTL 中对应哪边？
横排 RTL 中行内起点通常在右侧，但百分比基准仍是包含块行内尺寸。
竖排后 10% 会不会变成按高度？
若行内轴映射到物理高度，表现上会按包含块对应的高度计算；原则仍是行内尺寸。
为什么百分比上下边距常让布局难算？
它随着包含块行内尺寸变化，容器变宽时纵向留白也会变大，可能和直觉中的高度比例不同。
参考资料
示例用于理解所注明的运行环境与边界；延伸学习可结合原文中的更多案例。