display:inline-block;で出来てしまった隙間をなくす3つの方法

inline-blockの隙間をなくす

先日、サイト内の隙間をなくす方法を以下の記事でご紹介しました。→サイト内の隙間をCSSでなくす方法

でも、回りに聞いてみたらdisplay:inline-block;で出来てしまう隙間に困っている方が多いとのこと。この隙間を解決するための4つの方法をご紹介します。

sponsored

linline-blockの隙間をなくす4つの方法

inline-blockのliを横並びにする

通常、皆さんはメニューを書くときにどうしているでしょうか。僕は以下のようにしています。

<ul>
  <li>list1
  <li>list2
  <li>list3
</ul>
li {
  display: inline-block;
  /* IE 6/7 */
  /display: inline;
  /zoom: 1;
  width: 100px;
  height: 100px;
  border: 1px solid #ccc;
  list-style: none;
  text-align: center;
  line-height: 100px;
  margin: 0;
}

まぁ、1つめの方法ではCSSは変更しないので、このままで結構です。

では、これをどうするのか。はい、こうしちゃいます。

<ul>
    <li>list1</li><li>list2</li><li>list3</li>
</ul>

なぜかこうすると隙間が消えます。一番オーソドックスな方法なのではないでしょうか。

liの閉じるタグを無くしてしまう。

こっちはびっくり驚きの方法です。なんと、閉じるタグを無くしてしまうのです。実際に書いてみると以下になります。

<ul>
    <li>list1
    <li>list2
    <li>list3
</ul>

こんなんで隙間なくなっちゃうの?とは思うんですけど、なくなります。

でも、この方法だと多分SEOに影響がでそうですね。HTML5では閉じるタグがなくても表示に影響はないのですが、Googleは推奨していません。

初めの方法で直す方が無難かもしれません。

ul(liの親の要素)のletter-spacingにマイナスの値をつける

letter-spacingというのは、文字の間隔を決めるCSSのプロパティです。基本的にはあまり使わないプロパティですが、隙間を埋めるためだけには使えます。記述は以下です。

ul {
  letter-spacing: -0.5em;
}

ただし、このままliをなにも記述しないと文字の表示がおかしくなってしまうので、以下の記述もしっかりとつけてください。

li {
  display: inline-block;
  /* IE 6/7 */
  /display: inline;
  /zoom: 1;
  width: 100px;
  height: 100px;
  border: 1px solid #ccc;
  list-style: none;
  text-align: center;
  line-height: 100px;
  letter-spacing: normal; /* 追加 */
}

一番したの記述を追加しています。ulでプロパティの値を変更してしまっているので、戻す作業は必須です。

ul(liの親の要素)にfont-size:0;をいれる。

はい、これも以下のように記述します。

ul {
  font-size: 0; /* 追加 */
}

こちらも再度は書きませんが、liの要素を元に戻す記述が必要です。font-sizeをしっかりと追加しておきましょう。

まとめ

隙間で一番苦しむinline-blockについての隙間のなくし方をご紹介しました。一番良い方としてはやっぱりCSSを変更するのが無難ですかね・・・HTMLの方法は裏技的なイメージがあります。しっかりとそのような所も気にしておきましょう。

 

-ブログ運営
-