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

问题:

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%; }

   
     A     
     
   
 
  
   
     B     
     
   
 
  
   
     C     
     
   
 

回答1:

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

回答2:

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

回答3:

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

文章来源: How is padding-top as a percentage related to the parent's width?