如果您查看CSS盒模型规范，将会观察到以下内容：
[margin]百分比是相对于所生成的盒子的包含块的 宽度 来计算的。 请注意，“ margin-top”和“ margin- bottom”也是如此。 如果包含块的宽度取决于此元素，则结果布局在CSS 2.1中未定义。 （强调我的）
确实是这样。但是 为什么 呢？到底什么会迫使任何人以这种方式设计它？很容易想到您想要的场景，例如，某件事总是比页面顶部低25％，但是很难提出您希望垂直填充相对于水平尺寸相对的任何原因。父母。
这是我所指现象的一个示例：
<div style="border: 1px solid red; margin: 0; padding: 0; width: 200px; height: 800px;"> This div is 200x800. <div style="border: 1px solid blue; margin: 10% 0 0 10%;"> This div has top-margin of 10% and left-margin of 10% with respect to its parent. </div> </div>
将我的评论转为答案，因为这是合乎逻辑的。但是，请注意，这是没有根据的推测。为何以这种方式编写规范的实际原因在技术上仍然未知。
元素高度由子代的高度定义。如果一个元素的padding- top为：10％（相对于父级高度），则将影响父级的高度。由于孩子的身高取决于父母的身高，而父母的身高则取决于孩子的身高，所以我们的身高可能会不正确，或者会无限循环。当然，这仅会影响offset parent === parent，但仍然如此。这是一个很难解决的奇怪情况。
更新：最后两句话可能并不完全准确。叶元素（没有子元素的子元素）的高度会影响其上方所有元素的高度，因此会影响许多不同的情况。
