Getting rid of space between inline-block elements

Posted . Visible to the public.

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:

  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.
Profile picture of Henning Koch
Henning Koch
License
Source code in this card is licensed under the MIT License.
Posted by Henning Koch to makandra dev (2013-08-24 17:41)