请注意，所有红色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>