[CSS]ナビゲーションやリストなど、inline-block要素の間にできる隙間を解決する方法

ナビゲーションを実装する時など、ul要素を使って水平に並べると意図しない隙間ができてしまうのを解決する方法を紹介します。

Fighting the Space Between Inline Block Elements

[ad#ad-2]

• デモ
• 解決方法
• floatでいいんじゃないの

デモ

まずは、元となるコードから。

HTML

nav要素を使い、a要素で各アイテムを実装します。

<nav>
  <a href="#">One</a>
  <a href="#">Two</a>
  <a href="#">Three</a>
</nav>

CSS

「display: inline-block;」を使って水平に並べます。

nav a {
  display: inline-block;
  padding: 5px;
  background: red;
}

このままだと、下記のように意図しない隙間ができてしまいます。

解決方法

解決方法はいくつかあり、デモページではそれらを確認できます。

デモページ

[ad#ad-2]

解決方法を一つずつ紹介します。

オリジナル

まずは、リスト要素をつかって、普通に実装してみます。

<ul>
  <li>one</li>
  <li>two</li>
  <li>three</li>
</ul>

インラインブロック要素の間に隙間ができてしまいます。

スペースの除去

エレメント間のスペースを取り除きます。
これはエレメント間に改行やタブが含まれていると、スペースとして扱われてしまうためです。

<ul>
  <li>
   one</li><li>
   two</li><li>
   three</li>
</ul>

コードは変ですが、隙間はなくなります。

下記のようにしても、スペースが除かれます。

<ul>
  <li>one</li
  ><li>two</li
  ><li>three</li>
</ul>

コメントの利用

スペースを除くために、コメントを利用することもできます。

<ul>
  <li>one</li><!--
  --><li>two</li><!--
  --><li>three</li>
</ul>

同様に、隙間なく表示されます。

ネガティブマージン

隙間分をネガティブマージンを使って、調整します。

nav a {
  display: inline-block;
  margin-right: -4px;
}

HTMLはクリーンなままですが、古いIEなどブラウザごとの調整が必要です。

閉じタグの省略

閉じタグ（</li>）を省略します。

<ul>
  <li>one
  <li>two
  <li>three
</ul>

この記述は気に入らないかもしれませんが、HTML5では問題ありません。

font-size:0を使う

親要素に「font-size:0;」を指定します。

nav {
  font-size: 0;
}
nav a {
  font-size: 16px;
}  

スペースのフォントサイズが0ということは、幅も0になるということです。この方法を使用する時は、必ず子要素のフォントサイズを忘れないようにします。

floatでいいんじゃないの

横に並べるために、inline-block要素を使用する必要はありません。floatを使用しても同様に並べることができます。floatは幅・高さ、そしてパディングも設定通りに表示されます。

inline-blockを使う利点は、「text-align:center;」を使えることです。これは親要素に指定するだけで簡単に真ん中に配置することができます。