Read more

Getting rid of space between inline-block elements

Henning Koch
August 24, 2013Software engineer at makandra GmbH

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

Illustration web development

Do you need DevOps-experts?

Your development team has a full backlog? No time for infrastructure architecture? Our DevOps team is ready to support you!

  • We build reliable cloud solutions with Infrastructure as code
  • We are experts in security, Linux and databases
  • We support your dev team to perform
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.
Posted by Henning Koch to makandra dev (2013-08-24 19:41)