21

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

0

5 Answers 5

42

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

1
  • 1
    Nice. How unexpected... Thanks for finding this! Jul 12, 2013 at 19:07
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

1

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

1
  • 2
    it can be usefull to keep ratio of boxes
    – G-Cyrillus
    Jul 12, 2013 at 18:20
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);
2
  • 100vh is the height of the screen - you probably mean 100vw, which is the width?
    – ESP32
    Feb 27, 2021 at 21:18
  • padding-top: 25vh does the same thing as the calc... for me.
    – eddygeek
    Oct 29 at 20:21
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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.