Question

这是我的示例代码：

＆＃13;

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;
}

＆＃13;

<div id="#container">text</div>

＆＃13;

当我在chrome中运行它并检查元素div的计算样式时，宽度将如上所定义为25px，但填充顶部为13.65px。

我知道填充顶部是根据元素宽度的百分比计算的。所以它应该是25px或2.5px的1％。

为什么它会以13.65px的形式出现？

Answer 1

在MDN上填充：

百分比是指包含块[source]
的宽度

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

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

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

1 个答案: