以百分比填充

时间:2014-07-13 18:38:32

标签: css padding percentage

我刚注意到一些非常奇怪的东西,看看这个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%; }

2 个答案:

答案 0 :(得分:2)

根据宽度以百分比填充,因为您的宽度相同,它们将是相同的。尝试添加一个等于高度的宽度,如下所示:

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

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

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

查看小提琴:http://jsfiddle.net/a98tJ/8/

希望这有帮助。

答案 1 :(得分:1)

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