CSSのinline-blockの改行による隙間を消す方法【初心者向け】

CSSのinline-blockの改行による隙間を消す方法について解説します。

ソースコード上で改行があるとインライン要素やインラインブロック要素に空白が出来てしまう問題を解決します。

そもそもCSSについてよく分からないという方は、CSSの書き方について解説した記事を読むとさらに理解が深まります。

 

なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のCSSカリキュラムをもとに執筆しています。

 

 

inline-blockに隙間が出来てしまう原因

inline-blockは、インライン要素のように扱えて、簡単に横並びが実現できる上に、横幅と縦幅を与えられるなど、とても便利な設定なので、良く使われるのではないでしょうか。

しかし同時に、「変な隙間ができた」経験、ありませんか。

HTML

<div class="container">
  <div class="inline-contents"></div>
  <div class="inline-contents"></div>
  <div class="inline-contents"></div>
</div>

 

CSS

.container {
  display: block;
  border: 1px #000 solid;
}

.inline-contents {
  width: 33.3333%;
  height: 200px;
  display: inline-block;
  background-color: #66b6d5;
}

右と下。。明らかに設定していない数値なのに、隙間があいてます。

そのせいで、width: 33.3333% (つまり1/3 以下)の箱が三つ、横並びになっているはずなのに、カラム落ちしてしまっています。

今回ばかりは、box-sizing を設定しても、marginやpaddingを0にしても、変化なしです。

inline-blockは、inline要素としての側面は「横並びにできる」ことだけではなく、font-size や line-height などの値が影響してくる場合があります。

 

inline-blockの隙間を消す書き方

下にできる隙間は、文字のデフォルトの設定でベースラインが図のようになっているので、下に少し隙間を取ろうとする性質が残っているため、できてしまいます。

(そのため、.inline-contentsにvertical-align: bottom; を当てると、下の隙間だけ解決します。)

横にできる隙間は、<div>間の改行が原因なので、全て取ると解決しますが、コードがごちゃごちゃしてしまいます。コメントアウトを<div>間に書く方法もありますが、全てにそれを書くのは、ちょっと退屈な作業になりそうですね。

色々と面倒に感じてきたかと思いますが、実は、親の要素（ここでは.container）に、ある値を一つだけ書いてあげるだけで解決します。

それは、「font-size: 0;」。

なぜ親要素なのかというと、inline-blockを設定した要素そのものが「文字」の特徴を持ち合わせているためです。

 

[PR] Webデザインで副業する方法とは

実際に書いてみよう

HTML

<div class="container">
  <div class="inline-contents">aaa
  </div>
  <div class="inline-contents">aaa<br>
    aaa
  </div>
  <div class="inline-contents">aaa</div>
</div>

 

CSS

.container {
  display: block;
  border: 1px #000 solid;
  font-size: 0; /*←これだけでOK！*/
}

.inline-contents {
  width: 33.3333%;
  height: 200px;
  display: inline-block;
  background-color: #66b6d5;
  font-size: 16px;
}

 

綺麗にいっぱいに広がったブロックが出来上がりました。

inline-block内に文字を入力するとき、新たにinline-blockの方にfont-sizeを設定すれば大丈夫です。

しかし、それぞれの行数が違うと、こんなことが起こります。

そんなときは、inline-blockに、font-sizeと一緒にvertical-align: bottom; を追加してあげれば、解決できます。

 

追加CSS

.container {
  display: block;
  border: 1px #000 solid;
  font-size: 0; /*←これだけでOK！*/
}

.inline-contents {
  width: 33.3333%;
  height: 200px;
  display: inline-block;
  background-color: #66b6d5;
  /*↓追加*/
  font-size: 16px;
  vertical-align: bottom;
}

 

この記事を監修してくれた方 和田 祥子（わださちこ） フリーランスのWebデザイナー7年目です。Ruby勉強中。 テニスと音楽とビールが好きです。

 

TechAcademyでは、初心者でもオリジナルWebサイトを公開できるオンラインブートキャンプWebデザイン講座を開催しています。

挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。