Question

根据W3C spec，box-sizing: border-box应在宽度/高度内绘制填充。这意味着padding不应该增加该元素的宽度。

然而，我遇到一个奇怪的情况，其中填充实际上增加了宽度，在一个神秘的阈值之后：

＆＃13;

div {
  display: inline-block;
  width: auto;
}
input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 0;
}
#a {
  padding-right: 84px;
}
#b {
  padding-right: 100px;
}

＆＃13;

<div>
  <span>No padding</span>
  <input />
  <input />
  <span>Foo bar this determines the space</span>
</div>
<hr>
<div>
  <span>84px of padding</span>
  <input />
  <input id="a" />
  <span>Foo bar this determines the space</span>
</div>
<hr>
<div>
  <span>100px; width expands ?!?!</span>
  <input />
  <input id="b" />
  <span>Foo bar this determines the space</span>
</div>

＆＃13;

点击运行代码段并向下滚动以查看问题。 <input>的宽度应为214px，但设置超过84px的填充会开始增加宽度。为什么会发生这种情况，我该如何预防呢？

Answer 1

这意味着padding不应该增加该元素的宽度。

不完全正确。如果在从外部宽度减去填充之后，剩余的内部宽度为负，则将其钳制为零，因为它不能为负。

因此，是的，添加填充可以增加框的外部宽度。

但是，你的情况很有意思，因为外部宽度的增量发生在预期之前。

会发生一个带width: auto的内联块容器。这意味着它的宽度将是shrink-to-fit / fit-content大小。也就是说，

min（max-content size，max（min-content size，fill-available size））

因此，它的宽度取决于内容的宽度贡献。

然后在内联块内部有一个输入宽度width: 100%。

应该相对于包含块（内联块）的宽度来解析该百分比，但这是一个循环定义！

因此，宽度不明确。在这种情况下，CSS Sizing说

对于已替换的元素，min-content大小和max-content 大小是等价的，对应于适当的维度 default sizing algorithm返回的具体对象大小 [CSS3-IMAGES]元素，用无约束计算指定大小。

该算法返回被替换元素的intrinsic width。

min-content contribution和max-content contribution 每个轴是该轴中指定外部尺寸的元素，如果定;否则，它们是指定的min-content size 在上面，加上该轴[...]中元素的边距/边框/填充。

也就是说，内联块的宽度至少是输入的固有宽度加上它的填充。

一旦知道了这个宽度，就可以解决输入的百分比。

然后，让我们说

文字宽度为x
输入具有固有宽度y
输入的填充宽度为z

假设有足够的可用空间，内联块（和输入）的宽度将为max(x, y+z)。

因此，如果z，增加填充x >= y+z不会影响生成的宽度。但是一旦达到x == y+z，结果宽度将随着填充而增加。

您可以使用明确的宽度而不是百分比来避免此行为，并使用min-width来达到所需的百分比宽度。

input {
  width: 0; /* Ignore intrinsic width */
  min-width: 100%; /* Instead of width */
}

＆＃13;

div {
  display: inline-block;
  width: auto;
}
input {
  display: block;
  width: 0; /* Ignore intrinsic width */
  min-width: 100%; /* Instead of width */
  box-sizing: border-box;
  padding: 0;
}
#a {
  padding-right: 84px;
}
#b {
  padding-right: 100px;
}

＆＃13;

<div>
  <span>No padding</span>
  <input />
  <input />
  <span>Foo bar this determines the space</span>
</div>
<hr>
<div>
  <span>84px of padding</span>
  <input />
  <input id="a" />
  <span>Foo bar this determines the space</span>
</div>
<hr>
<div>
  <span>100px; width expands ?!?!</span>
  <input />
  <input id="b" />
  <span>Foo bar this determines the space</span>
</div>

＆＃13;

填充增加边框的宽度

1 个答案: