Html 输入类型的宽度=文本元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1143789/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Width of input type=text element
提问by erikkallen
How come when I do this:
当我这样做时怎么会：
<input type="text" style="width: 10px; padding: 2px"/>
<div style="width: 10px; border: solid 1px black; padding: 2px"> </div>
the input ends up 2 px wider than the div in both IE6 and FF3? What am I missing?
在 IE6 和 FF3 中，输入最终比 div 宽 2 px？我错过了什么？
EDIT: As many people have said, the border is the issue. If I set border: 0px on the input, it will have the same width as the div with a 0 px border (verified by wrapping it inside a bordered SPAN).
编辑：正如许多人所说，边界是问题所在。如果我在输入上设置 border: 0px ，它将与带有 0 px 边框的 div 具有相同的宽度（通过将其包裹在有边框的 SPAN 内进行验证）。
However, when I measure the elements in paint, the div has a 14 px interior, just as expected (10+2+2). The input, however, has a 16 px interior, and then a border outside of that. Why is this? Probably not a bug since it happens in both IE6 and FF3, but I dont understand it.
但是，当我测量 Paint 中的元素时，div 的内部为 14 px，正如预期的那样 (10+2+2)。然而，输入有一个 16 像素的内部，然后是一个边框。为什么是这样？可能不是错误，因为它发生在 IE6 和 FF3 中，但我不明白。
回答by pegasus4747
I believe that is just how the browser renders their standard input. If you set a border on the input:
我相信这就是浏览器呈现其标准输入的方式。如果在输入上设置边框：
<input type="text" style="width: 10px; padding: 2px; border: 1px solid black"/>
<div style="width: 10px; border: solid 1px black; padding: 2px"> </div>
Then both are the same width, at least in FF.
那么两者的宽度相同，至少在 FF 中是这样。
回答by jason
The visiblewidth of an element is width + padding + border + outline, so it seems that you are forgetting about the border on the input element. That is, to say, that the default border width for an input element on most (some?) browsers is actually calculated as 2px, not one. Hence your input is appearing as 2px wider. Try explicitly setting the border-widthon the input, or making your div wider.
元素的可见宽度是width + padding + border + outline，因此您似乎忘记了输入元素上的边框。也就是说，大多数（某些？）浏览器上输入元素的默认边框宽度实际上计算为 2px，而不是 1。因此，您的输入显示为 2px 宽。尝试border-width在输入上显式设置，或使您的 div 更宽。
回答by Perica Zivkovic
input width is 10 + 2 times 1 px for border
边框的输入宽度为 10 + 2 倍 1 px
回答by Matthew Jones
I think you are forgetting about the border. Having a one-pixel-wide border on the Div will take awaytwo pixels of total length. Therefore it will appear as though the div is two pixels shorter than it actually is.
我想你忘记了边界。在 Div 上有一个 1 像素宽的边框将占用两个像素的总长度。因此，它看起来好像 div 比实际短两个像素。
