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

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

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

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

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

它为什么会以13.65像素的价格出现？

Answer 1

web*_*iki 8

在MDN上填充:

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

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

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

归档时间：	10 年，3 月前
查看次数：	2091 次
最近记录：	10 年，3 月前