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

今[OK]を、各リストの間のギャップを正確に8pxする必要がありますが、私は、ブラウザで表示するとき...そのmroeその後、8px。改行のその理由ます。

私は1本のライン上のすべてのliタグを持っていた場合は、

、それは大丈夫だと思うが、私は本当にそれをやりたいいけません。 このスペースはもうそこイマイチだから私は、CSSをそのまま私のhtmlを維持し、単に編集することができます方法は？あります。

Answer 1

あなたのマークアップ（すなわち、インデント）で、これらの項目の間に空白inline-blockするリスト項目を設定しているので、

さて、ここでトラブルを引き起こしているものです。 2つのリスト項目は、したがって、空白や各リスト項目の左側の余白で区切られている。

解決策：リスト項目をfloatにしてみたり、リストタグの間に空白を取り除く。

幸運ます。

Answer 2

ガットそれ

それぞれのliタグの間にスペースがある - 私はそれを削除します：

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

オリジナルの答え::

あなたも持って5pxのの上の余白スペースは13となりますので、あなたは5pxのトップマージンを削除する必要があります。

えー。あなたは5pxのの上マージンと私はすべての任意の下部の余白が表示されていない8の左マージンを持って書かれたように、

- あなたは確信して、これは正確なCSSですされています。

http://jsfiddle.net/j5yDd/する