html - 并排div无法解释的边距

Question

我有两个并排的 div 元素，但由于某种原因，它们之间有几个像素的边距。

我不明白为什么，因为根据 Chrome 的开发工具，这些 div 没有继承边距。

这是我得到的输出:

我的 HTML:

<div class="wrap">
<div class="menu_wrap center">
     <div class="row">
         <div style="width:200px;" class="display vdisplay brdr">Name</div>
         <div style="width:100px;" class="display vdisplay brdr">Surname</div>
     </div>
</div>
</div>

我的 CSS 包括可能的继承属性是:

*, *:before, *:after {
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
body{   
    padding:0px;
    margin:0px;
}
.wrap{
    margin:0 auto;
    width:900px;
    background-color:#adadad;
    padding-top:30px;
}
.center{
  margin:0 auto;  
}
.display{
  display:inline-block;
}
.vdisplay{
   vertical-align:top;
}
.menu_wrap{
   width:850px;
}
.row{       
  margin-bottom:3px;
  border:1px solid black;
  width:100%;
}
.brdr{
   border:1px solid black;
}

我已经包含了他们可能继承的所有相关元素 - 我仍然不知道为什么这个差距仍然存在!这让我发疯!

谁能解释这种差距从何而来？

Answer 1

在 HTML 的同一行中设置元素时，会出现一些奇怪的行为。这里有一篇关于这个问题的非常好的文章和一些解决方案:

http://css-tricks.com/fighting-the-space-between-inline-block-elements/

但我会给你一个快速总结:

基本上，放置在同一行上的任何元素之间总是会有一个空间(大约 5 像素)。这个空间不是由边距或填充引起的。它实际上只是一个空间。在那篇文章中，作者将其等同于单词之间的空格，我认为这可能是最好的思考方式。

至于解决方案，我通常发现最好的解决方案是不要在代码的元素之间放置任何换行符。显然，这会导致事情变得有点困惑，但您可以通过执行以下操作来解决这个问题:

<div style="width:200px;" class="display vdisplay brdr">Name
</div><div style="width:100px;" class="display vdisplay brdr">Surname</div>

前一个元素的结束标记与下一个元素的开始标记在同一行。

其他选项包括设置负边距以抵消空间，或者使用 float 代替，等等。不过，我发现 CSS 解决方案有点老套，我宁愿阻止问题发生，也不愿尝试反击。