Andy Andy - 4 months ago 6x
CSS Question

Parent's padding influences vertical relative padding of child in Chrome

I'm using the established method for keeping an element's ratio by setting a relative


The relative vertical margins and paddings are relative to the width of the containing block, as is width itself.

The width in this case is apparently the one of the padding-edge, so including the padding. A 100% absolute child will cover the parent's padding.

.outer {
border: 1px solid gray;
width: 60px;
height: 60px;
padding: 5px;

position: relative;

.inner {
position: absolute;
top: 0;
height: 0;
padding-bottom: 100%;

left: 0;
width: 100%;

background-color: lightgreen

<div class="outer">
<div class="inner">

The code should render the
at 60 x 60 px², right?

There shouldn't be a difference in assigning
height: 100%
padding-bottom: 100%
to the child, right?

This is the case in Firefox, but not in Chrome. What's going on?

Apparently Chrome (and Safari) is taking the containing box's padding into account, which it shouldn't.

Or am I mistaken?


Apparently it's a bug in Webkit and Blink – or it's just not specified, as Sergiy pointed out.

I consider it a bug since width: 100% is taking paddings into account, and any other % units should behave the same.

I filed a bugreport which got accepted.