CSS padding

CSS padding-top：100％使用父级的宽度？(CSS padding-top: 100% uses width of parent?)

我对这个发现有点无能为力，无法向我自己解释这背后的原因。

附带的小提琴显示两个DIV，一个嵌套在另一个。 外部DIV具有设定的高度和宽度以及相对位置。 内部DIV也有一个设定的高度和宽度。 除此之外，它的顶部，右侧和底部填充设置为100％。 \

据我所知，填充将根据父级的高度和宽度得出。 但是，结果显示所有填充（顶部，右侧和底部）仅引用父级的宽度。 似乎所有浏览器都呈现相同的结果。 因此，它必须是某种标准的一部分。

我的问题是为什么这是以这种方式实现的，以及是否有一种方法可以引用父级的高度而不是父级的顶部和底部填充的宽度。

I am a little stumbled at this find and cannot explain to myself the reasoning behind this.

The attached fiddle shows two DIVs, one nested in the other. The outer DIV has a set height and width as well as relative position. The inner DIV also has a set height and width. In addition to that, it was has top, right, and bottom padding set to 100%. \

From what I understand padding will be derived based on the parent's height and width. However, the result shows that all padding (top, right, and bottom) reference only parent's width. It seems that all browsers render the same results. As such, it must be part of some standard.

My question is why has this been implemented in such a way and whether there is a way for me to reference parent's height instead of parent's width for top and bottom padding.

最满意答案

是的，你对填充宽度的填充百分比是正确的。 它是W3 CSS Box模型规范的一部分：

http://www.w3.org/TR/CSS2/box.html#padding-properties

您将无法使用填充百分比来引用高度。 它总是指宽度。 对不起=（

Yes, you are correct about padding-top percent referring to the width. It is part of the W3 CSS Box model specifications:

http://www.w3.org/TR/CSS2/box.html#padding-properties

You will not be able to reference height with padding percentages. It will always refer to width. Sorry =(