Question

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

如果用firebug检查“project-link”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

正如Lucifer Sam所说，display:inline-block会在元素之间显示空格。

给出的洗脱是好的：

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

但对于内容较大的元素，我个人更喜欢这种在display:inline-block元素之间没有空格的解决方案。这就是我的所作所为：

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

Answer 3

正如Terminal Frost所说，将float: left添加到课程中，然后删除display: inline-block。此外，将content: "."添加到父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的第一个结果，希望我下次遇到这个问题时能到这里，而忘记简单的解决方法……也许对其他人也有用：）

div之间的这个额外空间来自哪里？

4 个答案: