padding-top如何作为与父母宽度相关的百分比？

Question

这是一个例子:

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

注意所有的红色div是如何相同height而且有padding-top:100%;,但它们A和B有不同的填充大小......并且看起来父级的宽度改变了这个值(注意C改变height了父级,但是没有不要改变填充物.

为什么padding以这种方式与宽度相关？

编辑:由于历史原因,如果jsfiddle消失,我在我的例子中使用的代码如下...

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

Answer 1

从CSS流体布局:当容器宽度增加时,基于百分比的margin-top增加:

在CSS中,所有四个边距:和填充:百分比是相对于宽度...即使这看起来可能是荒谬的.这就是CSS规范的方式,你无能为力.

直接从马的嘴里:

'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

百分比:指包含块的宽度