XHTML Linebreak space problem

Question

basically i have a ul list

<ul>
    <li style="background-image:url(images/thumbs/spaceinvader.jpg);"><a href="#"></a></li>
    <li style="background-image:url(images/thumbs/spaceinvader.jpg);"><a href="#"></a></li>
    <li style="background-image:url(images/thumbs/spaceinvader.jpg);"><a href="#"></a></li>
    <li style="background-image:url(images/thumbs/spaceinvader.jpg);"><a href="#"></a></li>
    <li style="background-image:url(images/thumbs/spaceinvader.jpg);"><a href="#"></a></li>
    <li style="background-image:url(images/thumbs/spaceinvader.jpg);"><a href="#"></a></li>
    <li style="background-image:url(images/thumbs/spaceinvader.jpg);"><a href="#"></a></li>
    <li style="background-image:url(images/thumbs/spaceinvader.jpg);"><a href="#"></a></li>
</ul>

now the styles for the list is:

li {
    display:inline-block;
    margin:5px 0 0 8px;
    width:73px;
    overflow:hidden;
}


li a {
    display:block;
    background:url(../images/gtborder.png);
    width:73px;
    height:55px;
}
li:hover {
    background-position:0px -55px;
}

Ok now, the gap between each list should be exactly 8px but when i view it in a browser... its mroe then 8px. Its because of the newline.

If i had all the li tags on one line, it would be fine but i dont really want to do that. Is there a way i can keep my html as it is and just edit the css so this space isnt there anymore?

Answer 1

Well, since you set the list items to be inline-block the whitespace between these items in your markup (i.e. the indentation) is what is causing trouble here. Two list items are therefore seperated by a whitespace and the margin on the left of each list item.

Solution: Try to float the list items or get rid of the whitespace in between the list tags.

Good luck.

Answer 2

Got it

There is a space between each li tag - I removed it:

http://jsfiddle.net/j5yDd/1/

original answer::

You also have a top margin of 5px so the space will be 13, you need to remove the 5px top margin.

er. are you sure this is the exact css - as written you have a top margin of 5px and a left margin of 8. I don't see any bottom margin at all.

http://jsfiddle.net/j5yDd/