填充顶部占宽度的百分比不起作用

Question

这是我的示例代码：

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？

Answer 1

在 MDN 上进行填充：

Percentages refer to the width of the containing block [source]

这意味着百分比填充是根据 父元素 的宽度计算的，而不是元素本身。

在你的情况下，#container 的填充顶部是根据 <body> 的宽度计算的。

填充顶部占宽度的百分比不起作用

Padding top as percentage of width not working

css

padding

percentage