Проблема космического пространства XHTML

Question

в основном у меня есть список 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>

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

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, затем 8px. Это из-за новой строки.

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

Answer 1

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

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

Удачи.

Answer 2

Понятно

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

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

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

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

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

http://jsfiddle.net/j5ydd/