David Jones

Unwanted margin when using display inline block

I was running into a strange issue when I was trying to get a ul list to display as a grid by setting the width to 50% and the display to inline block. With these styles applied to my ul I did not get the desired effect. I then changed the with to 49% and my ul displayed as a grid but there was a slight margin on the right hand side even though I had margin set to 0.

This is a issue with using inline block as a display. To over come this issue I set the width to 50% and used float of left instead.

float: left;
width: 50%;

The reason behind this is that the line break, and maybe a few tabs in your html source code. This is being read as a space. Using a float is a solution but there are a few others.

Minimising your html. There will not be any line breaks or tabs so no problem.

Using a margin of -4px. This of course will all depend on your font size but in all browsers post IE7 this works fine. Who cares about IE7 and below anyway, I know I dont!

display: inline-block;
margin-right: -4px;