html - 填充增加边框的宽度

Question

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

但是，我遇到了一个奇怪的情况，在一个神秘的阈值之后，填充实际上增加了宽度:

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

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

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

Answer 1

This means padding should not increase the width of that element.

不完全正确。如果从外部宽度减去 padding 后，剩余的内部宽度为负，它将被钳位为零，因为它不能为负。

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

但是，您的情况很有趣，因为外部宽度的增加发生在预期之前。

发生的情况是有一个内联 block 容器，其宽度为 :auto。这意味着它的宽度将是 shrink-to-fit/fit-content尺寸。也就是说，

min(max-content size, max(min-content size, fill-available size))

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

然后在该内联 block 中有一个输入宽度 width: 100%。

该百分比应该相对于包含 block (内联 block )的宽度来解析，但这是一个循环定义!

因此，宽度是不确定的。在那种情况下 CSS Sizing说

For replaced elements, the min-content size and max-content size are equivalent and correspond to the appropriate dimension of the concrete object size returned by the default sizing algorithm [CSS3-IMAGES] of the element, calculated with an unconstrained specified size.

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

The min-content contribution and max-content contribution in each axis is the element’s specified outer size in that axis, if definite; otherwise, they are the min-content size, as specified above, plus the element’s margin/border/padding in that axis [...].

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

一旦知道该宽度，就可以确定输入的百分比。

然后，让我们说

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

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

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

您可以通过使用确定的宽度而不是百分比来避免此行为，并使用 min-width 来实现所需的百分比宽度。

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

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

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