这是我的示例代码:
body {
margin: 0;
padding: 0;
border: 0;
background: #444;
}
#container {
width: 25px;
margin: auto;
margin-top: 2px;
padding-top: 1%;
border-bottom: 3px solid #58e;
background: #fff;
}<div id="#container">text</div>当我在 chrome 中运行它并检查元素 div 的计算样式时，宽度为 25px，如上定义，但 padding-top 为 13.65px。
我知道 padding-top 是根据元素宽度的百分比计算的。所以它应该是 25px 的 1% 或者 2.5px。
为什么会变成 13.65px？
最佳答案
在 MDN 上用于填充:
Percentages refer to the width of the containing block [source]
这意味着百分比填充是根据父元素的宽度计算的，而不是元素本身。
在您的案例中，填充顶部为 #container是根据<body>的宽度计算的.
关于css - 填充顶部占宽度的百分比不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30479830/