CSS – Clear extra space in display: inline-block items

Posted on

I run into this a lot and see people who have had the same problem. When you make a set of navigation links out of an li you set them to display: inline-block and now there are extra spaces between your items.

The spaces are actual text spaces as interpreted by the browser.

To fix:
Set your container (ul) to font-size:0 and if you have text in your li, set its font-size explicitly to what you want.

This will fix any extra spaces in your inline-block lists.

Leave a Reply

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