css/html: padding in % doesn't make sense

Question

Consider the following html

<div id="parent">
    <div id="child"/>
</div>

I've given the parent a height of 100px. The child has a height of 100% and a padding of "10% 0". In CSS:

* {
    box-sizing: border-box;
}
#parent {
    height: 100px ;
}
#child {
    height: 100%;
    padding: 10% 0;
}

Or checkout this jsfiddle. Anyway, from the above I would expect the child div to have a top/bottom border of 10px (10% of 100px). But it is 31.5px. Can someone explain why this happens and how I can achieve what I want ?

Thanks a lot!

score 5 · Answer 1 · answered Nov 27 '13 at 20:49

5

Any percentage value will be calculated using the width of the element.

answered Nov 27 '13 at 20:49

Jan Heinrich Reimer

741
10
25

+1 Agreed. [From MDN Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-top): "Percentages refer to the width of the containing block". – showdev Nov 27 '13 at 20:53

score 2 · Answer 2 · answered Nov 27 '13 at 20:50

2

The % is based on the width of the element not the height.

answered Nov 27 '13 at 20:50

cooper667

427
4
7

score 2 · Accepted Answer · edited May 23 '17 at 11:59

2

Percentage is width based: If you do this you will get the desired result. Also <div> is not self closing.

* {
    box-sizing: border-box;
}
#parent {
    height: 100px;
    width : 100px;
    background-color: green;
}
#child {
    height: 100%;
    padding: 10% 0%;
    background-color: blue;
}

See related question: How to set the margin or padding as percentage of height of parent container?

edited May 23 '17 at 11:59

Community

1
1

answered Nov 27 '13 at 20:51

khollenbeck

16,028
18
66
101

ok, thnx. But in my case the width can be anything. I assume that the only solution in my case is using javascript – Jeanluca Scaljeri Nov 27 '13 at 21:08
Np, yeah I think JavaScript is the solution for now. – khollenbeck Nov 27 '13 at 21:19

css/html: padding in % doesn't make sense

3 Answers3