先日、サイト内の隙間をなくす方法を以下の記事でご紹介しました。→サイト内の隙間をCSSでなくす方法
でも、回りに聞いてみたらdisplay:inline-block;で出来てしまう隙間に困っている方が多いとのこと。この隙間を解決するための4つの方法をご紹介します。
linline-blockの隙間をなくす4つの方法
inline-blockのliを横並びにする
通常、皆さんはメニューを書くときにどうしているでしょうか。僕は以下のようにしています。
まぁ、1つめの方法ではCSSは変更しないので、このままで結構です。
では、これをどうするのか。はい、こうしちゃいます。
なぜかこうすると隙間が消えます。一番オーソドックスな方法なのではないでしょうか。
liの閉じるタグを無くしてしまう。
こっちはびっくり驚きの方法です。なんと、閉じるタグを無くしてしまうのです。実際に書いてみると以下になります。
こんなんで隙間なくなっちゃうの？とは思うんですけど、なくなります。
でも、この方法だと多分SEOに影響がでそうですね。HTML5では閉じるタグがなくても表示に影響はないのですが、Googleは推奨していません。
初めの方法で直す方が無難かもしれません。
ul（liの親の要素）のletter-spacingにマイナスの値をつける
letter-spacingというのは、文字の間隔を決めるCSSのプロパティです。基本的にはあまり使わないプロパティですが、隙間を埋めるためだけには使えます。記述は以下です。
ただし、このままliをなにも記述しないと文字の表示がおかしくなってしまうので、以下の記述もしっかりとつけてください。
一番したの記述を追加しています。ulでプロパティの値を変更してしまっているので、戻す作業は必須です。
ul（liの親の要素）にfont-size:0;をいれる。
はい、これも以下のように記述します。
こちらも再度は書きませんが、liの要素を元に戻す記述が必要です。font-sizeをしっかりと追加しておきましょう。
まとめ
隙間で一番苦しむinline-blockについての隙間のなくし方をご紹介しました。一番良い方としてはやっぱりCSSを変更するのが無難ですかね・・・HTMLの方法は裏技的なイメージがあります。しっかりとそのような所も気にしておきましょう。
