inline-block

Remove The Gaps On inline-block

When coding a menu or such like using lists a lot of us use inline-block to get the list items to sit next to each other. This is usually better than float as then it has an actual height on the page without having to use a clearfix. However it causes a lot of developers to have to be scratching their heads for a while or sometimes getting mad and crazy wondering where the heck that white space is coming from inbetween each element!

Well here are some ways on how you get rid of that annoying little space.

Remove the gaps inbetween your elements

<ul>
  <li>item 1</li><li>item 2</li><li>item 3</li>
</ul>

Or a way that looks a little nicer

<ul>
  <li>
   item 1</li><li>
   item 2</li><li>
   item 3</li>
</ul>

Or you could do this as well

<ul>
  <li>item 1</li
  ><liitem 2</li
  ><li>item 3</li>
</ul>

Or you could even use comments

<ul>
  <li>one</li><!--
  --><li>two</li><!--
  --><li>three</li>
</ul>

As weird as most of them look and will feel a little odd to use they all work and all your items will sit directly next to each other.

If you are using HTML5 you can even skip the closing tags although I just cannot bring myself to do this it feels double wrong.

<ul>
  <li>item 1
  <li>item 2
  <li>item 3
</ul>

Depending on your chosen browser support you can also use a negative margin to the right of -4px but this can be a little funny in ie6 and 7. You can also use font-size: 0; on the parent element but this is proven to be problematic in older androids and if you use font-face and also if you use ems it can cause some issues as well. Finally of course if you are really modern and do not need a lot of support you could use flexbox but I am not sure the world is ready for you yet.

Hopefully this will keep a lot of heads sore free and tempers in check.

Leave a Reply

Your email address will not be published. Required fields are marked *