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

inline-blockの隙間をなくす

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

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

sponsored

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の方法は裏技的なイメージがあります。しっかりとそのような所も気にしておきましょう。

 

-ブログ運営
-