0

inline-blockで横並びにしたときにできる隙間の対処法

inline-blockで横並びにしたときにできる隙間の対処法

ナビゲーションや画像など、横並びに要素を配置したいときにdisplay:inline-blockを利用する方法があります。その際に要素ごとの間に隙間ができてしまう問題があります。今回はその理由と対処方法を解説します。

まずは、サンプルとして以下のような、画像3枚をinline-block指定した<li>タグを並べたHTMLを見てください。




[ HTML ]

画像を<li>タグで囲み3枚配置しています。

[ CSS ]

<li>タグにdisplay:inline-block;を指定し横並びに、vertical-align:bottom;を<li>タグとimg要素に指定して、ベースラインを揃えています。

このコードをブラウザで確認してみると以下のデモサンプル1のようになります。

デモサンプル

デフォルトの隙間

画像の間に隙間が出来てしまいます…。

 

なぜ隙間ができるのか?

先程のコードをよく見てみると、<li>~</li>ごとに改行をしているのが分かります。
実はこの</li>の後ろに、見えない改行が半角のスペースが存在するのです。
原因はこの「改行」なんですね。

見えないものは分からないよ!って思いますが、困ったものです…。

 

隙間をなくす方法は?

大きくHTMLで解決する方法と、CSSで解決する方法があります。

 

▼HTMLで解決する場合

1.HTMLの改行をやめる

<li>タグごとに改行をいれていたのを、単純にやめて続けて記載する方法です。コードが見にくくなりますが、これで原因の改行もなくなります。

2.改行をコメントアウトする

少し強引な手段ですが、改行ごとコメントアウトしてしまうという方法。後で見返した時に意味がわからなくなってしまうかもしれませんので、あまりおススメは出来ませんが…。

3.</li>タグを削除する

こちらも最善ではありませんが、改行自体なくなる方法です。

 

上記3つの方法は、少々無理矢理な感じがしますので個人的には、以下の4か5をオススメします。こちらは、CSSで解決をする方法になります。

 

▼CSSで解決する場合

4.親要素にfont-size:0を指定する

隙間が出来てしまっている<li>タグの親要素にあたる、<ul>タグに対してクラス名を割り当てfont-size:0;を指定します。

[ HTML ]

[ CSS ]

5.親要素にletter-spacingにマイナス値を指定する

隙間が出来てしまっている<li>タグの親要素にあたる、<ul>タグに対してクラス名を割り当てletter-spacing(文字間)にマイナス値を指定する事で要素同士のスペースを詰めています。同時に<li>タグに対しては、letter-spacing:normalで通常に戻す指定をしておきます。

[ HTML ]

[ CSS ]

 

以上の5つを実際にサンプルで確認してみると、どれも隙間がなくなっているのが確認出来ます。

デモサンプル2

 

お好きな方法を選んで試してみてください。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

mororeco > CSS > inline-blockで横並びにしたときにできる隙間の対処法