并排divs无法解释的边缘

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/

但我会给你快速摘要：

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

至于解决方案，我通常发现最好的解决方案是不在代码中的元素之间放置任何换行符。显然这会导致事情变得有点混乱，但你可以通过做这样的事情来解决这个问题：

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

前一个元素的结束标记与下一个元素的开头位于同一行。

其他选项包括设置负边距以抵消空间，或使用float等。我发现CSS解决方案虽然有点hacky，但我宁愿防止这个问题而不是试图反击它。

Answer 2

在容器上添加font-size: 0;将解决此问题。