Debriefing [デブリーフィング] | Web関連・恋愛・ライフハックを発信するブログメディア。

都内で働く20代Web系男子が運営するブログメディア。Web関連、恋愛、仕事、ライフハック、などについて情報を発信していきます。

【CSS】displayプロパティでliタグを横並びにした時にできる隙間をなくす方法

liタグを横並びにした時にできる隙間をcssでなくす方法

Webサイトのナビゲーションなどをulタグ、liタグを使って横並びにレイアウトしたい時に、display:inline-block または inlineを使って横並びにする人も多いと思います。

その時にliとliの間に僅かな隙間ができてしまうことがあります。ブラウザのデフォルトスタイルはしっかりリセットしたものの、何故か隙間ができてしまいます。

今回はその隙間をなくす方法をいくつか説明します。

実装例

f:id:tak-kun:20170404232841p:plain

まずは現象を分かりやすく図で説明すると、上の図のようなイメージです。ulタグで囲ったliタグをdisplay:inline-blockを使って横並びにします。

HTML

<ul>
  <li>hogehoge</li>
  <li>hogehoge</li>
  <li>hogehoge</li>
</ul>

 

HTMLはこんな感じに書いています。

CSS

ul li {
  display: inline-block;
}

 

cssはこんな感じです。

原因

原因はliタグを改行する書き方をすると、その改行がスペースとして認識されるため、隙間が空いてしまうのです。

しかしコーダーの人の中にはソースの書き方にこだわりを持っている人もいると思いますので、HTMLのソースフォーマットは崩さず、できればCSSのみで完結したいものです。

では具体的な解消方法を説明していきます。

解決方法1. ulにfont-size:0pxで解消

ul {
  font-size: 0px;
}

まず一つ目の直し方はulタグにfont-size:0pxを指定するとliの隙間がなくなります。

たったこれだけ。ただしliタグの中にテキストを入れている場合は、そのテキストのフォントサイズも0pxになるため、テキストを入れてる場合はliタグ個別にフォントサイズを適用しましょう。

解決方法2. ulにline-height:0で解消

ul {
  line-height: 0;
}

 

次の方法はulタグにline-height:0を指定すると隙間が直ります。

解決方法3. displayではなくfloteを使う

ul li {
  float: left;
}

 

個人的にはこれが1番無難なやり方だと思います。displayプロパティを使うのではなく、floteプロパティを使って、横並びにする方法です。特にdisplayプロパティでコーディングする理由がなければ、floteでも良いと思います。

解決方法4. HTMLのソースのインデントや改行を消す

<ul>
<li>hogehoge</li><li>hogehoge</li><li>hogehoge</li> </ul>

 

いやいやCSSで直すのは今回は難しいよ。というサイトであればCSSで直すのではなく、HTML側でも直すことが可能です。

やり方はliタグのインデントや改行を消すと隙間が直ります。

まとめ

上記のやり方でliタグ間の隙間を直すことができるので、自分のコーディング方法に合ったやり方で解決してみてください。

作るサイトのデザインにもよりますが、あらかじめリセットCSS等に記述しておくのもいいかもしれませんね。