CODEWITHSUNDEEP
htmlcss
Jake
Jake

Reputation: 4234

How does padding percentage work?

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?

Upvotes: 15

Views: 13502

Answers (1)

Explosion Pills
Explosion Pills

Reputation: 191729

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.

Upvotes: 23

Related Questions