css - CSS 在 % 问题中转换像素 - 计算不正确

Question

我有一个div.wrap640px × 890px 的容器 ( )。

我想添加一个padding-top40px，但以 %. 所以 40px / 890px = 4.4943820225%

.body { width: 640px; height: 890px; }
.wrap {
 padding-top: 4.4943820225%;
 width: 100%; height: 100%;
}

但是当我检查 Chrome 开发工具时，我有padding-top= 28.750px。这是为什么？

谢谢你的帮助！

Answer 1

因为它将这些 4,4943820225% 舍入一点，并根据父元素的宽度计算它们。

所以，640px x 4,49..% = 28,7px

http://www.w3schools.com/cssref/pr_padding.asp

% - 以包含元素宽度的百分比指定填充

Answer 2

如果您看到规范http://www.w3.org/TR/CSS2/box.html#propdef-padding-top，则使用百分比时，填充（所有边）是相对于宽度计算的。

引用

百分比： 指包含块的宽度