inline-blockって何かと便利です。
例えば、高さの違う要素をfloatで並ばせようとすると、カラム落ちしてレイアウトが崩れます。その際にinline-blockを使うとカラム落ちせずに並べることができるのです。
そんな便利なinline-blockですが、そのまま指定しただけでは、謎の隙間ができてしまうんですよね・・・
今回はその隙間を無くす方法をまとめました。
隙間を無くす方法
まず次のようなhtmlとCSSを用意しました。
◆html
|
1 2 3 4 5 |
<ul class="hoge"> <li>ボックス01</li> <li>ボックス02</li> <li>ボックス03</li> </ul> |
◆CSS
|
1 2 3 4 5 6 7 |
ul.hoge li{ background:#FBA848; display:inline-block; width: 130px; height: 130px; line-height:130px; } |
これを使って無くす方法を説明していきます。
1.改行を無くす
◆html
|
1 2 3 |
<ul class="hoge"> <li>ボックス01</li><li>ボックス02</li><li>ボックス03</li> </ul> |
改行を無くすだけで隙間が無くなります。なにこれ簡単。
かなり手っ取り早いですが、要素の中身が多くなればなるほど、コードが乱雑になり見にくくなります。
人によってはこの方法はあまり気持ちよくないかと思われます。
2.親要素のfont-sizeを0にする
◆CSS
|
1 2 3 4 5 6 7 8 9 10 11 |
ul.hoge { font-size:0; } ul.hoge li{ background:#FBA848; display:inline-block; width: 130px; height: 130px; line-height:130px; font-size:14px /*追加部分*/ } |
要素を囲っているタグ（今回の場合はul）にfont-size:0を指定してあげると、隙間が無くなります。
その際の注意点ですが、要素のCSS（li）にfont-sizeを指定し直してあげて下さい。
忘れると当たり前ですが、文字が表示されなくなります。
私は過去に忘れたことがあり、文字何で表示されてないんだーっ！ってなりました。馬鹿です(笑)
3.親要素のletter-spacingにマイナスの値を設定する
◆CSS
|
1 2 3 4 5 6 7 8 9 10 11 |
ul.hoge { letter-spacing: -.40em; /* 追加部分 */ } ul.hoge li{ background:#FBA848; display:inline-block; width: 130px; height: 130px; line-height:130px; letter-spacing: normal; /* 追加部分 */ } |
要素を囲っているタグ（今回の場合はul）に、letter-spacingにマイナスの値を設定してあげて、隙間を無理やり詰めてしまう方法です。
要素タグ（li）には、letter-spacingの設定を通常に戻す設定をしてあげましょう。
まとめ
inline-blockは便利でよく使うからこそ、悩まれる方が多いと思います。ですが、+α加えるだけで問題が解決します。
色んな方法をご紹介しましたが、CSSの方法が一番良いかなと思います。ちなみに私が良く使用するのは、font-size:0にする方法です。letter-spacingにマイナスの値を設定する方法もよく使用しますが、サイトによって使い分けています。
ぜひお試しください！
