div 之间的额外空间从何而来？

Question

http://www.lethalmonk6.byethost24.com/index.html

如果您使用 firebug 检查“项目链接”div 之间的间距，则会发现每个 div 之间添加了几个像素的边距。我将边距设置为 20 px，然后添加这些小位。它从哪里来？

Answer 1

您正在使用

display:inline-block

，因此元素之间的空白就是您所看到的。您可以删除 div 之间的空白或使用

float: left

代替。

详细说明...如果您使用

display: inline-block

，请执行以下操作：

<div></div><div></div>

而不是这个：

<div></div>
<div></div> // White space is added because of the new line

Answer 2

正如 Terminal Frost 所说，将

float: left

添加到类中，并删除

display: inline-block

。此外，将

content: "."

添加到父 div 容器中可以解决这样做时遇到的换行问题。

Answer 3

正如 Lucifer Sam 所说，

display:inline-block

将向您显示元素之间的空间（如果有）。

给出的解决方案很好：

<div></div><div></div>

但是对于内容较多的元素，我个人更喜欢这种在

display:inline-block

元素之间没有空格的解决方案。这就是我所做的：

   <div>
       large content
   </div><!-- No space
--><div>
       large content 2
   </div>

Answer 4

我对这里提供的解决方案不太满意，然后我遇到了一个我之前实际上用来解决这个问题的修复程序，但忘记了......

您可能需要的只是简单地将

font-size: 0;

添加到父容器（您可以为子容器覆盖此规则，因此它不会破坏您的字体）。

所以，这是一个基本示例：

<div class="font-zero">
    <div class="inline-block"></div>
    <div class="inline-block"></div>
    <div class="inline-block"></div>
</div>

<style>
    .font-zero { font-size: 0; }
    .inline-block { display: inline-block; }
</style>

有了这个例子，你不必担心代码中的标记（就我个人而言，我认为删除代码中的换行符来解决这个问题真的很难看），而且你也不需要使用浮动，这可能是由于多种原因，这并不是最佳选择。

由于此页面是第一个 Google 结果，我希望下次遇到此问题时能到达这里并忘记简单的修复...也许它对其他人也有用:)

Answer 5

我只是偶然发现了这里，我的解决方案是在我使用的元素之一上设置

overflow: hidden;

。