【不具合のお知らせ】AndroidとiOSに関する一部記事で画像が読み込めない現象が発生しております。

【CSS】displayプロパティのblock/inline/inline-blockとは?違いについても解説

displayブロパティの主要な値の3つであるblockinlineinline-blockについて違いも含めてわかりやすく解説していきます。

モグモグさん

理解しておかないと、なぜか要素に高さや余白が適用されない…ということが起きたりするのでゆっくりしっかり理解しておきましょう。

この記事でわかること
  • block/inline/inline-blockについてそれぞれ理解できる
  • 3つの違いについて理解できる

blockとinlineを初期値に持つ主要なHTMLタグ

HTMLタグごとにdisplayの初期値が決まっているので、最初にざっとまとめておきましょう。

モグモグさん

こちらのページが参考になるので、必要な方はざっとチェックしておきましょう!

display: blockを持つ主要なHTMLタグ

  • div
  • p
  • h1~h6
  • form
  • ul
  • table

display: inlineを持つ主要なHTMLタグ

  • span
  • em
  • strong
  • label
  • code

block/inline/inline-blockの違い

最初に違いを理解するとわかりやすいので違いから解説します。

ポイントは、並び方幅と高さの指定marginとpadding(余白)の指定です。

display: blockとは?

display: blockの特徴は下記3つです。

  • 並び方: 縦並び
  • 幅と高さの指定: 可能
  • marginとpadding(余白)の指定: 可能

モグモグさん

実際にコードと実行後の画面を見ていきましょう。

<div class="box blue"></div>
<div class="box red"></div>
<div class="box yellow"></div>

<style>
.box {
  width: 50px;
  height: 50px;
}
.box:not(:first-child) {
  margin-top: 20px;
}
.blue {
  background-color: #63B3ED;
}
.red {
  background-color: #FC8181;
}
.yellow {
  background-color: #F6E05E;
}
</style>

display blockの実行結果

display: blockの青と赤と黄色の要素を表示すると、こんな感じになります。

3つの要素が縦に並びつつ、幅と高さ、余白それぞれ適用されていることがわかります。

display: inlineとは?

display: inlineの特徴は下記3つです。

  • 並び方: 横並び
  • 幅と高さの指定: 不可能
  • marginとpadding(余白)の指定: 左右のみ可能

モグモグさん

実際のコード例を見ていきましょう。

<div class="box blue"></div>
<div class="box red"></div>
<div class="box yellow"></div>

<style>
.box {
  width: 50px;
  height: 50px;
  display: inline;
}
.box:not(:first-child) {
  margin-top: 20px;
}
.blue {
  background-color: #63B3ED;
}
.red {
  background-color: #FC8181;
}
.yellow {
  background-color: #F6E05E;
}
</style>

このコードを実行すると、divの中身がなく幅と高さが適用されないので要素が表示されません。

モグモグさん

divの中身に要素を入れて実行してみます。

<div class="box blue"><span>blue</span></div>
<div class="box red"><span>red</span></div>
<div class="box yellow"><span>yellow</span></div>

<style>
.box {
  width: 50px;
  height: 50px;
  display: inline;
  padding: 0 10px;
}
.box:not(:first-child) {
  margin-left: 20px;
}
.blue {
  background-color: #63B3ED;
}
.red {
  background-color: #FC8181;
}
.yellow {
  background-color: #F6E05E;
}
</style>

display inlineの実行結果

display: inlineの青と赤と黄色の要素を表示すると、こんな感じになります。

3つの要素が横に並びつつ、幅と高さは効かないことがわかります。

注意

上下のpaddingも効くことは効きますが、下記のように文章が重なったりする挙動が生まれるので上下のpaddingは効かないものと理解しておくと良いと思います。

<p>This is an example text.<span class="sample">This text has 20px padding.</span>When it's multiline, it looks ugly like this.</p>

<style>
.sample {
  padding: 20px;
  background: gray;
}
</style>

display inlineのpadding実行結果

上下のpaddingを付与すると複数行の場合こんな感じになってしまいますので、基本的に左右のみ有効です。

display: inline-blockとは?

一言で表すと、並び方が横並びになったinline: blockです。

display: inline-blockの特徴は下記3つです。

  • 並び方: 横並び
  • 幅と高さの指定: 可能
  • marginとpadding(余白)の指定: 可能

モグモグさん

実際にコードと実行後の画面を見ていきましょう。

<div class="box blue"></div>
<div class="box red"></div>
<div class="box yellow"></div>

<style>
.box {
  width: 50px;
  height: 50px;
  display: inline-block;
}
.box:not(:first-child) {
  margin-top: 20px;
}
.blue {
  background-color: #63B3ED;
}
.red {
  background-color: #FC8181;
}
.yellow {
  background-color: #F6E05E;
}
</style>

display inline-blockの実行結果

display: inline-blockの青と赤と黄色の要素を表示すると、こんな感じになります。

3つの要素が横に並びつつ、幅と高さ、余白それぞれ適用されていることがわかります。

まとめ

CSSのdisplayブロパティの主要な値の3つであるblockinlineinline-blockについて違いも含めて解説しました。

改めてポイントは、並び方幅と高さの指定marginとpadding(余白)の指定です。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です