display:inlineで出来たliタグ同士のすき間をなんとかする

自分の車のラジエーター液がすぐに無くなってしまい困っているjyunzyです。
1カ月もするとほぼ無くなります。ラジエーターを直すべきなんでしょうけど、
このおじいちゃんカーにこれ以上投資していいものかどうか悩んでおります。

liタグを使って横並びのナビゲーションを作った時に、liタグ同士に身に覚えがない隙間が出来たことはありませんか？

あれはcssでdisplayプロパティにinlineの値をつけて、htmlソース内で改行をした時にできるものです。
↓こんな感じで改行すると、隙間ができます。

<li>○○○</li>
<li>△△△</li>
<li>×××</li>

それなので、改行をせずに下記のようにliタグをつなげれば隙間が無くなるのですが、

<li>○○○</li><li>△△△</li><li>×××</li>

今度はソースが汚く見えてしまいます。

私がオススメしたいのは、font-sizeプロパティに0の値を入れて隙間を消す方法です。

すき間を消したいタグを囲んでいるタグに対して、font-size:0;を指定してあげます。
liタグの場合は、ulタグやolタグになりますね。

ul {
    font-size: 0;
}
ul li {
    display: inline;
}

ただし、liタグに入っているのが文字の場合、文字が表示されなくなってしまうので、下記のように改めてliタグに対してフォントサイズを指定してあげる必要があります。

ul {
    font-size: 0;
}
ul li {
    display: inline;
    font-size: 16px;
}

これを知っておけば、レスポンシブデザインのコーディングの時に役立つかと思います。お試しください。