How is padding-top as a percentage related to the parent's width?

Question

Here is an example:

http://jsfiddle.net/QZAd8/1/

Notice how all of the red divs are the same height and have padding-top:100%;, yet

Answer 1

The height of an element relies on its content, which include the padding and margin of its child elements, so that would a loop, if the child elements rely on its parent height.

Answer 2

If you came here looking for an alternative like I did, you can set padding-top as a percentage of vertical height using a CSS calculation:

padding-top: calc(.25 * 100vh);

Answer 3

Just because it's the way it is suppose to be :) http://www.w3.org/TR/CSS2/box.html#propdef-padding-top

Answer 4

From CSS fluid layout: margin-top based on percentage grows when container width increases :

In CSS, all four margin: and padding: percentages are relative to the width ...even though that may seem nonsensical. That's just the way the CSS spec is, there's nothing you can do about it.

Straight from the horse's mouth:

'padding-top', 'padding-right', 'padding-bottom', 'padding-left'
Value:      <padding-width> | inherit
Initial:    0
Applies to:     all elements except table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column
Inherited:      no
Percentages:    refer to width of containing block
Media:      visual
Computed value:     the percentage as specified or the absolute length

Percentages: refer to width of containing block

Answer 5

It's true that padding percentage is relative to the width, but specifically, padding: 100% can also be read as padding: *width-of-container*px.

The A and C blocks had a width of 70px. Applying padding: 100% was the same as padding: 70px