输入元素后的未知空格

Question

我无法理解其中一个div中的间距，因为输入元素右侧似乎有一些未知的空白区域。我有一个宽度为684px的div，包含2个带有以下css的输入元素：

width: 290px;
padding-left:10px; 
padding-right:0px; 
border:1px solid black; 
margin-left:20px; 
margin-right:20px; 

我期待2个输入相互浮动，因为我将容器div的宽度设置为2个输入框占用的总空间：580（宽度）+20（左边距）+80（左边距和右边距） ）+4（边框）= 684.但是，在此宽度处，第二个输入框显示在第一个输入框下方。仅当容器div的宽度设置为最小值689px时，输入框才会显示为彼此相邻。请注意，容器div的边距和填充都已设置为0。我使用2个浏览器检查了所有元素，其大小与上述相同。什么是额外的5像素（689-684像素）？

Answer 1

如果你要坚持下去，那么他们两个都要漂到左边。默认情况下，它们是内联块，因此内联元素之间的空格实际上是正常的

编辑： 查看提供此链接的评论和标记 Display: Inline block - What is that space?

这正是我的意思......我只是懒得写出来......经验教训。

Answer 2

似乎浏览器在某些元素中保留空间，即使它们没有内容，例如div的。通过将这些元素的font-size设置为0，可以有效地删除这样的空间。如@mikedidthis所指出的，可以找到here的详尽解释。