Problema de espaço de quebra de linha XHTML

Question

Basicamente, eu tenho uma lista UL

<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>

Agora os estilos da lista são:

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 agora, a lacuna entre cada lista deve ser exatamente 8px, mas quando eu a vejo em um navegador ... seu mroe e 8px. É por causa da nova linha.

Se eu tivesse todas as tags Li em uma linha, tudo bem, mas eu realmente não quero fazer isso. Existe uma maneira de manter meu HTML como está e apenas editar o CSS para que esse espaço não esteja mais lá?

Answer 1

Bem, já que você define os itens da lista como inline-block O espaço em branco entre esses itens em sua marcação (ou seja, o recuo) é o que está causando problemas aqui. Dois itens da lista são, portanto, separados por um espaço em branco e a margem à esquerda de cada item da lista.

Solução: tente flutuar os itens da lista ou se livrar do espaço em branco entre as tags da lista.

Boa sorte.

Answer 2

Entendi

Há um espaço entre cada tag li - eu a removi:

http://jsfiddle.net/j5ydd/1/

Resposta original ::

Você também tem uma margem superior de 5px para que o espaço tenha 13, você precisa remover a margem superior de 5px.

er. Tem certeza de que este é o CSS exato - como escrito, você tem uma margem superior de 5px e uma margem esquerda de 8. Não vejo nenhuma margem inferior.

http://jsfiddle.net/j5ydd/