Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
0
Help us understand the problem. What is going on with this article?
@v97ug

【図解】どうして「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

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

参考

0
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
0
Help us understand the problem. What is going on with this article?