Why the space between divs when using display: inline-block [duplicate]

Question

Why is an empty space between divs when using display: inline-block, like in this example: http://jsbin.com/IhULuZO/1/edit.

I know I can use float:left, but I want to get rid of the empty space without floating elements if possible.

Answer 1

Because the indentation of your code technically is a bunch of whitespace.

<div class="parent">
    <div class="child"></div><div class="child"></div><div class="child"></div>
</div>