li要素をdisplay:inlineを使って横並びにさせると、li要素の間に半角スペースが入ってul要素の幅に収まりきれずに改行されてしまうことがあります。

これはli要素の記述が下記のように改行されていると起こります。

<ul>
　<li>イチゴ</li>
　<li>リンゴ</li>
　<li>りんご</li>
　<li>ミカン</li>
　<li>メロン</li>
</ul>

この半角スペースはCSSでmarginとpaddingを０にしても消えません。なぜでしょうか？

これは一般的なブラウザが改行を半角スペースとして認識するため、横並びのli要素の間に半角スペースが入ってしまうことが原因です。

解決策

1.li要素を改行しない

そもそも改行が原因なのですから改行をせずに下記のように記述すると余白の問題は解決します。ただし、li要素が多くなったりa要素などがソースに追加されると見づらくなりメンテンナス性が低下します。

<ul>
<li>イチゴ</li><li>リンゴ</li><li>りんご</li><li>ミカン</li><li>メロン</li>
</ul>

2.li要素をHTMLコメントでつなげる

li要素どうしをHTMLコメントでつなげると改行していても余白はできません。

<ul>
　<li>イチゴ</li><!--
　--><li>リンゴ</li><!--
　--><li>りんご</li><!--
　--><li>ミカン</li><!--
　--><li>メロン</li>
</ul>

3.display:table-cellを指定する

li要素に対してdisplayプロパティでteble-cellを指定すると余白はできません。それならul要素に「display: table;」と「table-layout:fixed;」を指定し、li要素に「display: table-cell;」を指定して横並びにした方がいいですかね。