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

初心者向けにCSSのinline-blockの改行による隙間を消す方法について解説しています。インライン要素やインラインブロック要素では、ソースコード上で改行があると表示したときに空白が出来てしまう問題があります。CSSによって空白が出来ないように調整します。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

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

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

CSSについてそもそもよく分からないという方は、CSSの書き方について解説した記事をまずご覧ください。

 

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

 

田島悠介

今回は、CSSに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

CSSのinline-blockの改行による隙間を消す方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

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] HTML/CSSで挫折しない学習方法を動画で公開中

実際に書いてみよう

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では初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。

現役エンジニアがパーソナルメンターとして受講生に1人ずつつき、マンツーマンのメンタリングで学習をサポートし、最短4週間で習得することが可能です。

また、現役エンジニアから学べる無料のプログラミング体験会も実施しているので、ぜひ参加してみてください。