css - 两个div之间莫名其妙的空格

Question

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

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

这种行为的原因可能是什么？

更新： 它应该是什么样子。

Answer 1

出于对飞行意大利面怪物的喜爱，请正确格式化您的代码！

在任何情况下，你inline-block的 s 不工作的原因是因为你没有font-size: 0;在他们的容器上设置。

这是您更新的 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在元素本身上添加（默认）。