Inline-block background image button links have spaces on both sides

[user438]

I made an inline-block list style main menu navigation bar with background images and static dimensions, but the problem is that there's a little space between each of the buttons on right and left.

I don't see any padding or margin styling in my css below. How can I fix this so the buttons stick to each other?

HTML:

<div id="menu">
<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>

CSS:

#menu ul li{
	display: inline-block;
	margin-bottom: 0px;
}
#menu ul li a{
	padding-top: 7px; /* to center link text vertically */
	width: 120px;
	height: 41px;
	float: left;
	text-decoration: none;
	color: #FFF;
	background:url(image/bt1.gif) no-repeat right top;
}
#menu ul li a:hover {
	background:url(image/bt2.gif) no-repeat right top;
}

[tirna]

I don't normally use inline-block, but I suspect there might be some default spacing between the block boxes the style generates which may or may not be able to be altered using margin or padding.

A safer option could be to rearrange your markup and styles to use "display: inline" after which you can easily close any gaps between the menu items.

[WebJoel]

It may not solve this problem, but always include this as for first line of CSS in all your builds:

* {margin:0; padding:0;}

It removes the default margin/padding from every element (" * " means "wildcard" or "all")

This one line alone solves about 50 problems with IE and its default margin and padding that it places upon every nameable element..

p.s., -I seldom use "display: inline-block;" for horizontal lists. I prefer:

#menu ul li {
float:left;
margin-bottom: 0px;
}

and, if you use " * {margin:0; padding:0;} " as your very first CSS rule, you do not ever need to state the redundant " margin-bottom: 0px; " in your code again. -This not only levels the playing fields with IE, but it reduces code-bloat by removing the repetitive lines like this.