Mysterious whitespace between “inline-block” divs [duplicate]

Answer 1

Inline-blocks are treated as inline elements so empty spaces separate them as usual words in parent element.

I propose 2 solutions:

1. You can fix it by removing spaces between inline-block divs, like this: http://jsfiddle.net/f3AKu/

2. You can set font-size of container to 0 so spaces won't be noticeable. This way you won't modify HTML markup, only CSS rules. Example: http://jsfiddle.net/wC68h/