Layout difference between floated inline-blocks and non-floated

Question

I'm trying to achieve a simple layout of 4 horizontal inline-blocks within a container.

The HTML:

<div id="wrapper">
    <ul id="myList">
        <li><p>1</p></li>
        <li><p>2</p></li>
        <li><p>3</p></li>
        <li><p>4</p></li>        
    </ul>
</div>​

I'd like to evenly lay the li's out horizontally. I'm using Compass and applying the following:

ul#mylist {
    @include reset-box-model;
    @include inline-block-list-container;
    margin: 0px auto;
    height: 180px;
    width: 640px;

    > li { 
        @include reset-box-model;
        @include inline-block-list-item(0px);
        width: 130px;
        height: 130px;
        padding: 10px;
        margin: 0px 5px;
    }
}

See the resultant HTML/CSS code and output on jsFiddle. Despite the dimensions of the li's seeming to fit...

(130px + (2 * 5px) + (2 * 10px) = 640px)) * 4 = 640px

... the 4th block is pushed down to the next line.

The li's only fit horizontally if I add a float: left; to the li's- see the resulting HTML/CSS code and output on jsFiddle.

Just wondering if anyone can explain what is going on with this please? I would have thought that the float: left; would not have been necessary since the dimensions of the inline-block li's fit? Thank you very much.

Answer 1

display: inline-block will take into account any surrounding white space. So the line breaks between your li elements are contributing to the width

Fixed example: http://jsfiddle.net/BL2Wq/8/

Edit: In-depth article on the issue: Fighting the Space Between Inline Block Elements