顶部填充百分比与父母的宽度有何关系？

Question

请注意，所有红色div都是一样的height并具有padding-top:100%;，但它们的A和B具有不同的填充大小…并且看起来 父级 的
宽度会 更改此值（请注意C会更改height父级的，但不会请勿更改填充）。

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

编辑：出于历史原因，万一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流畅的布局来看：当容器宽度增加时，基于百分比的边距顶部会增加：

在CSS中，所有四个margin：和padding：百分比都是相对于宽度的，尽管这似乎很荒谬。这就是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

百分比：指包含块的宽度