display:inlineでリストを横並びにした時にできる余白を解消する

Sponsored Link

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

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

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

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

これは一般的なブラウザが改行を半角スペースとして認識するため、横並びの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;」を指定して横並びにした方がいいですかね。

関連記事

福岡のウェブデザイン事務所「ハブワークス」

HP作成・リニューアルは福岡のハブワークスまでお気軽にお問い合わせください。ウェブサイト公開後の修正・更新もお任せください。フリーランスだからできるリーズナブルな料金設定でサービスをご提供いたします。