Here is my code: http://jsfiddle.net/spadez/FbADY/11/
Despite me using this code:
* {
margin:0;
padding:0;
}
There still seems to be a space between the items. In google chrome developer bar it says they dont have margin or padding to cause it.
It is because the li items display inline, and thus in your code as each item occurs on a new line, this outputs as a space. You can escape this by changing your CSS:
ul {
font-size:0;
}
This makes the size of the 'erroneous' space between items a zero, e.g. not visible and therefore taking up no space. Inline elements are interpreted as effectively the same as textual content, so where in your code you separate them with newlines etc, this becomes a space. Another solution would be to float the items left (float:left) or to place all li items on a single line in your HTML.
nb. You will likely want to reset font-size on your li (to, e.g. 16px etc) if you go with the sizing option above.
Because if you're using display: inline-block, it will also include the spaces between the li's.
Either remove the space between the li's or use float: left instead of display: inline-block.
It's the display: inline-block property, which renders whitespace in your source visually on the front end.
If you want to keep the inline-block display property, you can remove the whitespace in your HTML by stringing all of your elements together, e.g.:
<ul><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li></ul>
It's not pretty, but it solves the problem.
You could also look into using display: table-cell for horizontal layout, or using floats as suggested above.
