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

Question

Here is an example:

Notice how all of the red divs are the same height and have padding-top:100%;, yet they A & B have different padding sizes... and it appears that the width of the parent changes this value (note that C changes the height of the parent, yet that doesn't alter the padding).

Why is padding related to width in this way?

Edit: for historical reasons, and in case jsfiddle goes away, the code I used in my example is as follows...

.outer {
  background-color: green;
  height: 300px;
  width: 70px;
  float: left;
  margin-right: 10px;
}

.middle {
  background-color: red;
  height: 100px;
  width: 50px;
  padding-top: 100%;
}

.inner {
  background-color: blue;
  height: 3px;
  width: 100%;
}

<div class='outer'>
  <div class='middle'>
    A
    <div class='inner'>
    </div>
  </div>
</div>

<div class='outer' style='width:100px'>
  <div class='middle'>
    B
    <div class='inner'>
    </div>
  </div>
</div>

<div class='outer' style='height:400px'>
  <div class='middle'>
    C
    <div class='inner'>
    </div>
  </div>
</div>

score 42 · Accepted Answer · edited May 23 '17 at 12:02

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

Nice. How unexpected... Thanks for finding this! – Mason Cloud Jul 12 '13 at 19:07 — Mason Cloud, Jul 12 '13 at 19:07

Brian Phillips · Answer 2 · 2013-07-12T18:30:47.173

2

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

edited Jul 12 '13 at 18:30

answered Jul 12 '13 at 18:16

Brian Phillips

4,302
2
25
40

score 1 · Answer 3 · answered Jul 12 '13 at 18:12

1

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

answered Jul 12 '13 at 18:12

G-Cyrillus

101,410
14
105
129

2

it can be usefull to keep ratio of boxes – G-Cyrillus Jul 12 '13 at 18:20

score 1 · Answer 4 · answered May 28 '20 at 20:35

1

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);

answered May 28 '20 at 20:35

MrChrisRodriguez

493
6
12

100vh is the height of the screen - you probably mean 100vw, which is the width? – ESP32 Feb 27 '21 at 21:18

score 0 · Answer 5 · answered May 12 '19 at 04:43

0

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.

answered May 12 '19 at 04:43

sfy

2,810
1
20
22

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

5 Answers5

Linked

Related