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

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!

Answer 1

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