When two elements with display: inline-block
are sitting next to each other, whitespace between becomes a space character.
Solutions, in decreasing order of awesomeness:
- Don't have whitespace between two elements! See Whitespace Removal in Haml Show archive.org snapshot if you're using Haml.
- Don't use
inline-block
. Use floating elements instead (don't forget to clear them!). - 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).
- Give the container
font-size: 0
. Unfortunately this has issues on iOS devices.
Posted by Henning Koch to makandra dev (2013-08-24 17:41)