0

我有两个并排的 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;
}

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

任何人都能够解释这个差距来自哪里？

4

2 回答 2

4

在 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，我宁愿阻止这个问题，也不愿尝试反击。

于 2013-11-08T02:23:04.697 回答
2

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

于 2013-11-08T02:23:38.063 回答