两个div之间无法解释的空间

Question

问题是第4和第5个div之间的空格，可以在这里看到：  JSFiddle.1

如果我合并第一个和最后一个div，这个空格就会消失：  JSFiddle.2

这种行为的原因是什么？

更新 应该的样子。

Answer 1

请为了您对The Flying Spaghetti Monster的喜爱，正确格式化您的代码！

在任何情况下，inline-block无法正常工作的原因是您没有在其容器上设置font-size: 0;。

Here's your updated jsFiddle.

这是一个更漂亮的代码版本：

<强> HTML                            

<div id="listLeft">
    <div id="Left" class="pluginAdd">
        <p>left</p>
    </div>
</div>

<div id="listMiddle">
    <div id="Middle" class="pluginAdd">
        <p>middle</p>
    </div>
</div>

<div id="listRight">
    <div id="Right" class="pluginAdd">
        <p>right</p>
    </div>
</div>

<div id="listBottom">
    <div id="Bottom" class="pluginAdd">
    </div>
</div>
​

<强> CSS

body {font-size: 0;}

.pluginAdd {
    background-color: #ffd800;
    width: 70px;
    height: 15px;
    margin: 0 auto;
    display: block;
    font-size: 12px;
    background: url('/Images/pluginAdd.png') no-repeat center;
} 

#listTop {background: #b6ff00; width:100%; margin:0 auto; display:block;}
#listLeft {background: #4cff00; width:25%;  margin:0 auto; display:inline-block;}
#listMiddle {background: #00ff21; width:50%;  margin:0 auto; display:inline-block;}
#listRight {background: #00ff90; width:25%;  margin:0 auto; display:inline-block;}
#listBottom {background-color: #0ff; width:100%; margin:0 auto; display:block;}
​

Answer 2

这是由line-height大于inline-block元素的高度引起的。

要修复，请在元素的容器上设置line-height:1px。如果这些元素中有文本，您可能需要在元素本身上添加line-height: 1.2em（默认值）。