XHTML Linebreak Platzproblem

Question

im Grunde habe ich eine ul-Liste

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

nun die Stile für die Liste ist:

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 jetzt sollte die Lücke zwischen jeder Liste genau 8px, aber wenn ich es in einem Browser anzeigen ... seine mroe dann 8px. Seine wegen der Newline.

Wenn ich auf einer Linie all li-Tags hätte, wäre es in Ordnung sein, aber ich möchte nicht wirklich das tun. Gibt es eine Weise, die ich meine html halten kann, wie es ist und nur bearbeiten die CSS so diesen Raum ist nicht mehr da?

Answer 1

Nun, da Sie die Listenelemente setzen zwischen diesen Artikel im Markup inline-block die Leerzeichen sein (das heißt die Vertiefung) ist, was Probleme ist hier verursacht. Zwei Listenelemente sind daher mit einem Leerzeichen getrennt und am Rand auf der linken Seite jedes Listenelement.

. Lösung: Versuchen Sie, die Listenelemente oder loszuwerden, die Leerzeichen zwischen den Listen-Tags zu schweben

Viel Glück.

Answer 2

Got it

Es gibt einen Raum zwischen jedem li-Tag - ich entfernte es:

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

Original-Antwort ::

Sie auch einen oberen Rand von 5px haben so den Raum 13 sein wird, benötigen Sie den 5px oberen Rand zu entfernen.

er. dies sind Sie sicher, ist die genaue CSS -., wie Sie einen oberen Rand von 5px und einen linken Rand von 8 ich überhaupt keinen unteren Rand sehen haben geschrieben

http://jsfiddle.net/j5yDd/