CODEWITHSUNDEEP
csspaddingpercentage
php_nub_qq
php_nub_qq

Reputation: 16065

CSS padding in percent

I just noticed something really weird, have a look at this fiddle. There are two containers with different heights. Both containers' elements are set to vertical padding of 10%, which would logically mean that the shorter container's elements should be closer to one another. Surprisingly that's not the case. Could someone explain this behavior to me, I would like to know whether it is safe to say that a padding in percentage would be constant in value ( px ) regardless of the parent's height?

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%; }

Upvotes: 0

Views: 1624

Answers (2)

MrMike
MrMike

Reputation: 1540

The 10% is in relation to the size of the text's div, not the parent containers div. Since the text between both divs are the same, they will have the same amount of padding.

Upvotes: 1

link
link

Reputation: 2510

padding in percentages based on width, since your width is the same they will be the same. Try adding a width equal to the height like this:

.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%; }

Check out the fiddle: http://jsfiddle.net/a98tJ/8/

Hope this helps.

Upvotes: 3

Related Questions