インライン要素のなかでは、改行が半角スペースくらいの空白に変換されます。

たとえば、

<p>
aaa
bbb
ccc
p>

というhtmlは、ブラウザでは次のように表示されます。

aaa bbb ccc

このように、ソース内の改行は、半角スペースのような空白(正確には空白類文字というそうです) に変換されます。

画像やリストの間に空白

この仕様のせいで、意図したようにうまく表示されない場合があります。

たとえば、画像を隙間なく並べたい場合。

<img src="images/foo.gif" />
<img src="images/bar.gif" />
<img src="images/baz.gif" />
<img src="images/foo.gif" />
<img src="images/bar.gif" />
<img src="images/baz.gif" />

この場合は、画像と画像の間にスペースが入ってしまいます。

あるいは、リストをインラインで並べたい場合。

<ul>
<li><a href="top.html">Topa>li>
<li><a href="diary.html">Diarya>li>
<li><a href="contact.html">Contacta>li>
ul>

ul li {
display: inline;
}

こちらも、リストの要素と要素の間にスペースが入ってしまいます。

対策

margin, paddingで対処

マイナスマージンを指定するなどし、空白の分だけ要素の位置を調整します。

img {
margin-right: -5px;
}

display: block にして、floatなどさせる

ブロック要素ならば改行されないため、要素に「display:block｣を指定します。そのままでは全て縦に並んでしまうので、floatプロパティなどをつかって位置を調整します。

ul li {
display: block;
float: left;
}

ソースで改行しない

そもそもソースで改行しなければ、空白は出てきません。ただ、とても見づらいソースになってしまいます。

<img src="images/foo.gif" /><img src="images/bar.gif" /><img src="images/baz.gif" /><img src="images/foo.gif" /><img src="images/bar.gif" /><img src="images/baz.gif" />

ソースで改行を工夫する

こんな風に改行すると、空白をキャンセルできます。

<img src="images/foo.gif" /
><img src="images/bar.gif" /
><img src="images/baz.gif" /
><img src="images/foo.gif" /
><img src="images/bar.gif" /
><img src="images/baz.gif" />

ただ、時間をおいてソースを見たときに、なぜこうしたか思い出すのに時間がかかったり、多人数での作業に支障がでるかもしれません。

li要素などを改行すると、要素と要素の間に半角スペース分の余白が現れる件について調べてみた。 | Blog hamashun.com