How does padding percentage work?

Question

HTML

<div class='wrapper'>
    <div class='elementContainer'>
        This line should start halfway down the yellow box
    </div>
</div>

CSS

.wrapper
{
    position: relative;

    height: 300px;
    width: 400px;

    background: lightyellow;
    border: 1px solid black;
}

.elementContainer
{
    position: relative;
    height: 200px;
    width: 300px;

    padding-top: 50%;

    background: red;
}

Fiddle example: http://jsfiddle.net/jakelauer/s2ZXV/

In the example above, .elementContainer has a padding-top of 50%. This should be calculated based on the parent element's (.wrapper) height, which means it should come out to 150px. Instead, it comes out to 200px. What's going on?

Apparently it's being calculated as `.elementContainer` `padding-top: 50%` — Robert Harvey, Oct 15 '13 at 18:23
I think you might be misreading the documentation. The documentation states that percentages are based on the "containing block," not the parent of the containing block. — Robert Harvey, Oct 15 '13 at 18:25
In that case, it should only be `100px`, since the containing block is `200px` tall. — Jake, Oct 15 '13 at 18:25
OK, well the documentation also states that it is based on the *width*, which in your case is 400 in `.wrapper` See https://developer.mozilla.org/en-US/docs/Web/CSS/padding-top — Robert Harvey, Oct 15 '13 at 18:27
[See here](http://stackoverflow.com/questions/4982480) for an alternative. — Robert Harvey, Oct 15 '13 at 18:34

score 11 · Accepted Answer · answered Oct 15 '13 at 18:27

11

The specifications explain why.

<percentage>
The percentage is calculated with respect to the width of the generated box's containing block

50% of 400 is 200.

answered Oct 15 '13 at 18:27

Explosion Pills

176,581
46
285
363

How does padding percentage work?

1 Answers1

Linked

Related