Padding percentage values relativity
Are percentage values for padding calculated relative to the parent element's with or height? or are they calculated to the dimensions of the element the padding is applied to?
by Lucas Krause
HTML
<div class=a><div class=b></div></div>
CSS
.a {
background:#eee;
width:300px;
height:200px;
}
.b {
background:tomato;
width:100px;
height:0;
padding-top:50%;
}
JavaScript
/*`padding` is always calculated relative to the parent element's **width**, even when specifying `padding-top` or `padding-bottom`. `margin`s behave the same way.*/