Skip to main content


Showing posts from July, 2014

Fixing the space between two li elements which are displayed inline-block

This post is totally inspired by Mr. Chris Coyier's post on CSS-Tricks Named "Fighting the Space Between Inline Block Elements" While doing some navigation designs, I came across a problem that if I wrap 4 lis in a ul and wrap it in nav and gives the width of each li to 25% and style it with some basic css properties. A problem occurs.
The problem is that, The space between two li elements.
You can see in the image that, There is a little space between Home, Products, About us and Contact us link.
I've made a pen in CodePen of this demo if you would like to see it live.
There are probably 5 ways to get rid of it and another one is to use flexbox.
The markup of the menu:
HTML <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">Products</a></li> <li><a href="#">About us</a></li> <li><a href="#">Contact us</a&g…