inline-blockで横並びにしたときにできてしまう隙間をなくすテクニック

CSS

inline-blockで横並びにしたときにできてしまう隙間をなくすテクニック

2018年10月15日 12:00 

inline-blockで横並びにしたときにできてしまう隙間をなくすテクニック

こんにちは!

タイで買ったバナナチップスを食べながらブログ更新している社員Aです👩

社員旅行記についても書きたいのですが、4日間とも充実していて内容量が多いので、複数記事に分けて更新予定です^^

今後タイに行かれる方の参考になるような記事が書けたらと思っています!



さて、今回はCSSの「inline-blockで横並びにしたときにできてしまう隙間をなくすテクニック」をご紹介したいと思います。

 

意外とよく使う「inline-block」だけど欠点も…

便利なCSSの「inline-block」は、コンテンツを横並びにしたいときなどに使ったりするのですが、意外な欠点があります。

たとえば、下記のようなHTMLとCSSでボックスを横並びにすると、マージンを指定していないのにbox間に隙間ができてしまいます。

なぜ「inline-block」を横並びにすると隙間ができてしまうのか?

inline-blockを指定したときに、liに対しての後ろにある改行を半角スペースとして認識してしまうため、若干の隙間が出来てしまうのが原因です。

この隙間をなくすためには、いくつかのテクニックがあります。

 

「inline-block」で横並びにしたときに隙間を消す4つのテクニック

ここからは、「inline-block」でコンテンツを横並びにしたときにできてしまう隙間を消すための4つのテクニックをご紹介します。

 

1.改行しない

コード的には見栄えが悪くなってしまいますが、<li>間の改行をなくしてしまいます。

これにより隙間は完全に消えますが、htmlの見栄えを無視しているものなのできれいなソースコードを書きたい方には次に紹介する②のやり方をおすすめします。

 

2.inline-blockを囲む大枠に「font-size:0;」を指定する

今回で言えば、ulが大枠になります。この大枠に対して、「font-size:0;」を指定することで隙間が消えます。

このときの注意点は下記です。

font-size:0;を指定するときの注意点について大枠(今回の例ではul)に「font-size:0;」を指定する場合は、子要素(今回の例ではli)で「font-size:initial;」でフォントサイズを戻してあげてください。この指定をしないと、文字サイズが0のままになってしまいます。

 

 

まとめ

上記で紹介した以外にも、letter-spaceで対応する方法もありますが、端末や文字サイズによって調整が必要なため、コードの見栄えもよくなる②をおすすめします。

inline-blockは結構使用頻度が多く、float:leftに比べてもコンテンツ自体を中央揃えにできたりとメリットがあるので覚えておくと便利です!

スポンサーリンク

この記事を書いた人

社員A

社員A

フロントエンドエンジニア・デザイナーの社員Aです。 多分一番更新頻度が多いかと思います。このブログのテーマも作成しました。日本語力が乏しく…社内のみんなからも指摘をされるので、ブログの執筆を通じて語彙力強化していきたいです✨ 家ではデグーとチンチラという小動物を飼っていて、かなり溺愛しています…!小動物がすきな皆さま、小動物トークしましょう!