Css padding top作为一个百分比与父项'；宽度是多少？

以下是一个例子：

请注意，所有的红色div都是相同的

高度

，并且具有

填充顶部：100%，但它们的A和B有不同的填充大小。。。父对象的宽度似乎改变了这个值（注意C改变了父对象的
高度，但这不会改变填充）

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

编辑：出于历史原因，如果JSFIDLE消失了，我在示例中使用的代码如下


.outer{
背景颜色：绿色；
高度：300px；
宽度：70px；
浮动：左；
右边距：10px；
}
.中{
背景色：红色；
高度：100px；
宽度：50px；
填充顶部：100%；
}
.内部{
背景颜色：蓝色；
高度：3倍；
宽度：100%；
}

A.
B
C
来自：

在CSS中，所有四个边距：和填充：百分比都是相对于宽度的…尽管这看起来很荒谬。CSS规范就是这样，对此你无能为力

:

'padding-top'，'padding-right'，'padding-bottom'，'padding-left'
值：|继承
首字母：0
适用于：除表行组、表页眉组、表页脚组、表行、表列组和表列以外的所有元素
继承的：没有
百分比：指包含块的宽度
媒体：视觉
计算值：指定的百分比或绝对长度

百分比：指包含块的宽度

发件人：

在CSS中，所有四个边距：和填充：百分比都是相对于宽度的…尽管这看起来很荒谬。CSS规范就是这样，对此你无能为力

:

'padding-top'，'padding-right'，'padding-bottom'，'padding-left'
值：|继承
首字母：0
适用于：除表行组、表页眉组、表页脚组、表行、表列组和表列以外的所有元素
继承的：没有
百分比：指包含块的宽度
媒体：视觉
计算值：指定的百分比或绝对长度

百分比：指包含块的宽度

仅仅因为它是假定的方式：）
仅仅因为它是假定的方式：）
确实，填充百分比是相对于宽度的，但是具体地说，
填充：100%
也可以理解为
填充：*容器的宽度*px

A和C块的宽度为
70px
。应用
padding:100%
与
padding:70px
填充百分比确实与宽度有关，但具体而言，
padding:100%
也可以理解为
padding:*容器的宽度*px

A和C块的宽度为
70px
。应用
padding:100%
与
padding:70px
相同。元素的高度取决于其内容，其中包括其子元素的填充和边距，因此，如果子元素依赖于其父元素的高度，则会出现循环。
元素的高度取决于其内容，其中包括子元素的填充和边距，因此如果子元素依赖于其父元素的高度，则会出现循环。
如果您像我一样来这里寻找替代方案，可以使用CSS计算将padding top设置为垂直高度的百分比：

padding-top: calc(.25 * 100vh);

如果您像我一样来这里寻找替代方案，您可以使用CSS计算将padding top设置为垂直高度的百分比：

padding-top: calc(.25 * 100vh);

它可以用来保持拳击的比例，也可以用来保持拳击的比例。真想不到。。。谢谢你找到这个！美好的真想不到。。。谢谢你找到这个！100vh是屏幕的高度-你可能是指100vw，哪个是宽度？100vh是屏幕的高度-你可能是指100vw，哪个是宽度？