XHTML LineBreak пространство проблема

Question

в основном у меня есть список уль

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

теперь стили для списка:

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

Хорошо, теперь, разрыв между каждым списком должен быть точно 8px но когда я просмотрите его в браузере ... его mroe then 8px. Это из-за новой строки.

Если бы у меня были все теги li на одной строке, все было бы хорошо, но я действительно не хочу этого делать. Есть ли способ, которым я могу хранить свой html как есть, и просто редактировать css, чтобы это пространство больше не было?

Answer 1

Ну, так как вы установите элементы списка, чтобы быть inline-block пробелы между этими предметами в разметке (т.е. вдавливания) является то, что вызывает здесь проблемы. Поэтому два элемента списка разделяются пробелом и краем слева от каждого элемента списка.

Решение: попробуйте поплавать с элементами списка или избавиться от пробелов между тегами списка.

Удачи.

Answer 2

получил его

Существует пространство между каждой Li тегом - я удалил его:

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

оригинального ответ ::

У вас также есть верхний край 5px так пространство будет 13, вам нужно удалить верхний край 5px.

er. вы уверены, что это точный css - как написано, у вас верхний край 5px и левый край 8. Я вообще не вижу никакого нижнего края.

http://jsfiddle.net/j5yDd/