CSS填充百分比

Question

我刚刚发现了一些很奇怪的东西，请看一下fiddle。有两个高度不同的容器。两个容器的元素都设置为10％的垂直填充，这在逻辑上意味着较短的容器的元素应彼此靠近。令人惊讶的是事实并非如此。有人可以向我解释这种行为，我想知道是否可以肯定地说，无论父母的身高如何，填充百分比的值（px）都是恒定的？

HTML：

<div class='foo'>
    <div>foo</div>
    <div>foo</div>
</div>
<div class='bar'>
    <div>bar</div>
    <div>bar</div>
</div>

CSS：

.foo, .bar { display:inline-block; border:solid black 1px; }

.foo { height: 200px; }
.foo > div { padding-top: 10%; }

.bar { height:300px; }
.bar > div { padding-top: 10%; }

Answer 1

基于宽度的百分比填充，因为您的宽度相同，所以它们将相同。尝试添加一个等于高度的宽度，如下所示：

Answer 2

10％与文本div的大小有关，而不是父容器div的大小。由于两个div之间的文本相同，因此它们将具有相同的填充量。