css - 2つのdiv間の不可解なスペース

Question

問題は、4番目と5番目のdivの間のスペースです。これは、 JSFiddle.1で確認できます。

最初と最後のdivを組み合わせるとこのスペースは消えます： JSFiddle.2

この動作の原因は何でしょうか？

更新： それはどのように見えるべきかということです。

Answer 1

空飛ぶスパゲッティモンスターを愛するために、コードを適切にフォーマットしてください。

いずれにせよ、あなたのが機能しない理由は、あなたが彼らのコンテナにinline-block設定しなかったからです。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要素自体に（デフォルトで）追加する必要があります。