Inexplicable space between two divs

Question

The problem is a space between the 4th and the 5th divs, which can be seen here: JSFiddle.1

This space disappears if I combine the 1st and the last divs: JSFiddle.2

What can be a cause of this behavior?

UPDATE: That how it should be look like.

Answer 1

Please, for the love of The Flying Spaghetti Monster, format your code properly!

In any case, the reason your inline-blocks aren't working is because you didn't set font-size: 0; on their container.

Here's your updated jsFiddle.

And here's a much prettier version of your code:

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

This is caused by the line-height being greater than the height of the inline-block elements.

To fix, set line-height:1px on the container of the elements. If you have text in those elements, you'll probably need to add line-height: 1.2em (the default) on the elements themselves.