css - padding-bottom 是相对于元素的宽度吗？

Question

底部填充必须相对于元素的宽度，但我在最新版本的 Chrome 和 Firefox 中测试过，底部填充是相对于父元素的宽度。

我需要一个相对于元素宽度的元素，但它不起作用:

width: 200px;
padding-bottom: 50%; /* must be 100px  */
height: 0;

参见示例:http://dabblet.com/gist/6898263

我能做什么？

Answer 1

不，在padding properties , 百分比是相对于 containing block 的宽度的，这里可能是 body 元素或未设置宽度的 div 元素，因此它占用了可用宽度。

如果将元素包装在 div 容器中并在容器上设置所需的宽度，则可以按预期使用百分比。