Display: Inline block - What is that space?

The space is in the HTML. There are several possible solutions. From best to worst:

1. Remove the actual space in the HTML (ideally your server could do this for you when the file is served, or at least your input template could be spaced appropriately) http://jsfiddle.net/AWMMT/2/
2. Use float: left instead of display: inline-block, but this has undesirable effects on t he height: http://jsfiddle.net/AWMMT/3/
3. Set the container's font-size to 0 and set an appropriate font-size for the internal elements: http://jsfiddle.net/AWMMT/4/ -- this is pretty simple, but then you can't take advantage of relative font size rules on the internal elements (percentages, em)

http://jsfiddle.net/AWMMT/1/

<div>...</div><div>...</div>
              ^
              |--- no whitespace/new line here.

Your spaces were the new lines the browser converted to "spaces" when displaying it.

Or you could try to hack a bit with CSS:

A flexbox conveniently ignores whitespace between its child elements and will display similarly to consecutive inline-block elements.

http://jsfiddle.net/AWMMT/470/

body { display: flex; flex-wrap: wrap; align-items: end; }

Old answer (still applies to older, pre-flexbox browsers) http://jsfiddle.net/AWMMT/6/

body { white-space: -0.125em; }
body > * { white-space: 0; /* reset to default */ }