ナビゲーションや画像など、横並びに要素を配置したいときにdisplay:inline-blockを利用する方法があります。その際に要素ごとの間に隙間ができてしまう問題があります。今回はその理由と対処方法を解説します。
まずは、サンプルとして以下のような、画像3枚をinline-block指定した<li>タグを並べたHTMLを見てください。
[ HTML ]
画像を<li>タグで囲み3枚配置しています。
|
1 2 3 4 5 6 7 |
<section id="sbox"> <ul class="type-a"> <li><img src="images/sample_1.jpg" alt="sample1"></li> <li><img src="images/sample_2.jpg" alt="sample2"></li> <li><img src="images/sample_3.jpg" alt="sample3"></li> </ul> </section> |
[ CSS ]
<li>タグにdisplay:inline-block;を指定し横並びに、vertical-align:bottom;を<li>タグとimg要素に指定して、ベースラインを揃えています。
|
1 2 3 4 5 6 7 8 |
#sbox ul li{ display: inline-block; vertical-align:bottom; } #sbox ul li img{ width:300px; vertical-align:bottom; } |
このコードをブラウザで確認してみると以下のデモサンプル1のようになります。
画像の間に隙間が出来てしまいます…。
なぜ隙間ができるのか？
先程のコードをよく見てみると、<li>～</li>ごとに改行をしているのが分かります。
実はこの</li>の後ろに、見えない改行が半角のスペースが存在するのです。
原因はこの「改行」なんですね。
見えないものは分からないよ！って思いますが、困ったものです…。
隙間をなくす方法は？
大きくHTMLで解決する方法と、CSSで解決する方法があります。
▼HTMLで解決する場合
1.HTMLの改行をやめる
<li>タグごとに改行をいれていたのを、単純にやめて続けて記載する方法です。コードが見にくくなりますが、これで原因の改行もなくなります。
|
1 2 3 |
<ul class="type-a"> <li><img src="images/sample_1.jpg" alt="sample1"></li><li><img src="images/sample_2.jpg" alt="sample2"></li><li><img src="images/sample_3.jpg" alt="sample3"></li> </ul> |
2.改行をコメントアウトする
少し強引な手段ですが、改行ごとコメントアウトしてしまうという方法。後で見返した時に意味がわからなくなってしまうかもしれませんので、あまりおススメは出来ませんが…。
|
1 2 3 4 5 |
<ul class="type-a"> <li><img src="images/sample_1.jpg" alt="sample1"></li><!-- --><li><img src="images/sample_2.jpg" alt="sample2"></li><!-- --><li><img src="images/sample_3.jpg" alt="sample3"></li> </ul> |
3.</li>タグを削除する
こちらも最善ではありませんが、改行自体なくなる方法です。
|
1 2 3 4 5 |
<ul class="type-d"> <li><img src="images/sample_1.jpg" alt="sample1"> <li><img src="images/sample_2.jpg" alt="sample2"> <li><img src="images/sample_3.jpg" alt="sample3"> </ul> |
上記3つの方法は、少々無理矢理な感じがしますので個人的には、以下の4か5をオススメします。こちらは、CSSで解決をする方法になります。
▼CSSで解決する場合
4.親要素にfont-size:0を指定する
隙間が出来てしまっている<li>タグの親要素にあたる、<ul>タグに対してクラス名を割り当てfont-size:0;を指定します。
[ HTML ]
|
1 2 3 4 5 |
<ul class="type-b"> <li><img src="images/sample_1.jpg" alt="sample1"></li> <li><img src="images/sample_2.jpg" alt="sample2"></li> <li><img src="images/sample_3.jpg" alt="sample3"></li> </ul> |
[ CSS ]
|
1 2 3 |
.type-b{ font-size:0; } |
5.親要素にletter-spacingにマイナス値を指定する
隙間が出来てしまっている<li>タグの親要素にあたる、<ul>タグに対してクラス名を割り当てletter-spacing（文字間）にマイナス値を指定する事で要素同士のスペースを詰めています。同時に<li>タグに対しては、letter-spacing:normalで通常に戻す指定をしておきます。
[ HTML ]
|
1 2 3 4 5 |
<ul class="type-c"> <li><img src="images/sample_1.jpg" alt="sample1"></li> <li><img src="images/sample_2.jpg" alt="sample2"></li> <li><img src="images/sample_3.jpg" alt="sample3"></li> </ul> |
[ CSS ]
|
1 2 3 4 5 6 |
.type-c{ letter-spacing:-0.3em; /*文字間を強制的に詰めて調整する*/ } .type-c li{ letter-spacing:normal; /*文字間を通常に戻す*/ } |
以上の5つを実際にサンプルで確認してみると、どれも隙間がなくなっているのが確認出来ます。
お好きな方法を選んで試してみてください。