根据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 开始增加宽度。为什么会发生这种情况,我该如何预防?
最佳答案
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>
关于html - 填充增加边框的宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35078309/