search
LoginSignup
1

More than 1 year has passed since last update.

posted at

updated at

【図解】どうして「vertical-align: middle;」でimg要素下の余白がなくなるのか?を解説してみた

HTML・CSSでコーディングしている際、img要素下に謎の余白が出てくることってありませんか?

これは、img要素にvertical-align: middle;を設定すれば解決します。

でも、

  • そもそもなぜこのような現象が起こっているのか
  • なぜこれで解決するのか

について理解している方は少ないのではないでしょうか。
この記事ではその辺りについて解説していきます。

img要素下に余白ができるってどういうこと?

例えば、div要素の中にimg要素を入れるHTMLがあるとします。(実際のコードはこちら)

HTML
<div class="outer-box">
  <img src="https://drive.google.com/uc?export=view&id=1LJA0-Kgs6oqGkt-M5magSgspj6SpSPM2">
</div>

これを表示すると以下のようになります。(わかりやすくするため、outer-boxの背景をにしてます)

ScreenShot 2021-06-06 15.03.59.png

↑画像の下の部分に 謎の余白 (赤い線)ができていますね。。

なぜこうなっているの?

なぜこうなっているかというと、2つのポイントがあります。

  1. img要素はインライン要素である
  2. インライン要素は、デフォルトでvertical-align: baseline;が設定される

vertical-align: baseline;を設定すると、画像の場合、ベースラインに画像が乗っかった形になります。

Untitled (3).png

でも、なぜBaselineで揃わずに、下に余白ができるのでしょうか?

ここで重要なのが、font-sizeline-heightです。

インライン要素のfont-sizeとline-heightの関係

インライン要素では、font-sizeline-heightは以下のような感じになっています。

Group 6.png

文字通り、font-sizeは文字の大きさ、line-heightは行間を指しています。

では、vertical-alignの値を変えると、それぞれどのようになるのでしょうか?
1個ずつみていきましょう。

vertical-alignがtopの場合

Baseline1.png

topの場合、もし画像の縦幅がline-heightよりも大きくなった場合は、下に要素が拡張されます。

つまり、画像に余白ができる余地がありません。

bottomやmiddleの場合でも同じような考え方になります。

vertical-alignがbottomの場合

Baseline1 (1).png

bottomの場合は、もし画像の縦幅がline-heightよりも大きくなった場合は、上に要素が拡張されます。

こちらも、画像に余白ができる余地がありませんね。

vertical-alignがmiddleの場合

Baseline1 (2).png

もし画像の縦幅がline-heightよりも大きくなった場合は、上下均等に要素が拡張されます。

こちらも、画像に余白ができる余地がないでしょう。

vertical-alignがbaselineの場合

Baseline1 (3).png

baselineだと、もし画像の縦幅がline-heightよりも大きくなった場合、上には拡張されますが、下には拡張されません。
(baselineの上に乗っかっているだけなので)

こうなると、ベースラインの下側は自然と空きますよね。
なので、画像下に余白ができてしまいます。

例えるなら、ブロックの上に写真を載せているようなもの

🧑:「vertical-alignをtopやmiddleにしたら余白が消えましたが、なぜでしょう」
と思う方も多くいらっしゃると思いますが、

個人的にはこれはむしろ逆で、「baselineを設定すると余白ができる」のほうが適切かなと思っています。

それは例えるなら、baselineというブロック塀の上に写真を載せているようなものでしょうか(笑

332492_s.jpg

ブロックの上に載っている限りブロックは無くならないので、余白ができてしまう、と理解するといかがでしょう(伝わっていたら嬉しいです💦)

参考

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
1