When two elements with display: inline-block are sitting next to each other, whitespace between becomes a space character.

UI/UX Design by

We make sure that your target audience has the best possible experience with your digital product. You get:

• Design tailored to your audience
• Proven processes customized to your needs
• An expert team of experienced designers

Read more Show archive.org snapshot

Solutions, in decreasing order of awesomeness:

1. Don't have whitespace between two elements! See Whitespace Removal in Haml Show archive.org snapshot if you're using Haml.
2. Don't use inline-block. Use floating elements instead (don't forget to clear them!).
3. Try to compensate for the space with a negative margin. Unfortunately you will never be able to negate the space exactly, leading to weird hairlines betwen elements (especially on high-DPI displays, where a pixel is not a pixel).
4. Give the container font-size: 0. Unfortunately this has issues on iOS devices.