リストをinlineで並べた時の余白

下記のような指定でリストをinlineで並べ、li要素毎に改行すると、半角スペース分の余白ができてしまう。

ul {
	text-align: center;
}
ul li {
	display: inline;
}

<ul>
<li><a href="/">トップページ</a></li>
<li><a href="/service/">サービス案内</a></li>
<li><a href="/company/">会社情報</a></li>
<li><a href="/contact/">お問い合わせ</a></li>
</ul>

んで、この余白を埋めるための方法をいくつか紹介しますだ。

---- こっから続き

一行で書く

<ul>
<li><a href="/">トップページ</a></li><li><a href="/service/">サービス案内</a></li><li><a href="/company/">会社情報</a></li><li><a href="/contact/">お問い合わせ</a></li>
</ul>

改行を入れなければ、半角スペースは生じないので、OKってばOKですが、見難いのでおススメは出来ません。

コメントを使う

<ul>
<li><a href="/">トップページ</a></li><!--
--><li><a href="/service/">サービス案内</a></li><!--
--><li><a href="/company/">会社情報</a></li><!--
--><li><a href="/contact/">お問い合わせ</a></li>
</ul>

こんな感じでコメントを使うことで、半角スペースが生じなくなります。
この方法が一番見かける気がします。

「>」の前で改行する

<ul>
<li><a href="/">トップページ</a></li
><li><a href="/service/">サービス案内</a></li
><li><a href="/company/">会社情報</a></li
><li><a href="/contact/">お問い合わせ</a></li>
</ul>

「>」の前じゃなくてもいいんですけど、こんな風にすることでも半角スペースが生じなくなります。

半角スペースを利用する

最後は、特にどうこうするって訳じゃなくて、CSS側でこのスペース分だけ、調整してしまう方法。
paddingとmarginを上手い具合に調整してあわせます。
（X）HTMLソースはコレが一番っすね。

なんとなく、意外と知らない人が多いかもって思ったので上げました。
別の人が編集して、知らずにコメント消されたりって事も無きにしも非ずなので、覚えておくと良いかと思うだす。

各種SBMに追加

• 
• 
• 
• 
• 
• 
• 
•