画像の下に”謎の隙間”ができるのを解決するCSS

私が使うとパソコンの寿命が短くなる…四条せつなです。

Web制作をしていると、画像の下に”謎の隙間”が出来てしまうことがあると思います。これって、凄い厄介ですよね…でもでも、これはちゃーんとした理由があって出来たものです。

だから、この画像下の”謎の隙間”はCSSでバッチリ解決できるよっ！

コピペで画像の隙間を解決できるようにしてます！何故そうなるかの解説も書いておきますね！

画像の下に隙間ができちゃう例

おそらく、普通にWeb制作をしていると上のような感じになるんじゃないか？と思います。

そうそう！「margin」も「padding」も”0″に指定しているのに、画像に下に隙間ができちゃうんだよー（泣）

よーく見てもらうと、画像の下に余白があるのが分かると思います。これを解決する方法を今から紹介していきますね！

解決方法は2つあるよ！

この画像の下の“謎の隙間”問題。解決方法は2つあります。どちらも有効なのですが、アプローチが違うので両方ともご紹介しますね。

方法1：display: block

1つ目の方法は、画像を「ブロック要素」にするものです！

画像は文字と同じ「インライン要素」なんだね！だから、ベースラインに配置されるようになっているんだ。だから、隙間が空いちゃってたんだね！それを、「ブロック要素」にすれば解決できるってこと！

ちなみに、この方法の注意点は「ブロック要素」にするから、「text-align」で中央揃え出来なくなります。中央揃えする場合は、「margin: 0 auto」で対処してくださいね。

方法2：vertical-align: bottom

2つ目の方法は、下端揃えにするものです！

さっき話したように、画像は「インライン要素」なので、「vertical-align: bottom」で、下端にピッタリ付くようにしてるんだよー！

こちらは「インライン要素」のままで、下揃えができるようになっています。さっきの「ブロック要素」にしてしまうのも含めて、どちらかお好みで！

せつなのまとめ

画像の下に“謎の隙間”が出来てしまう問題。これは、画像が「インライン要素」だから起きてしまう問題なんです。なので、画像自体を「ブロック要素」にする。もしくは、画像を下端揃えにしてしまうことで解決できます。個人的には「div」で括ってしまうなら、「display: block」で「ブロック要素」にしてしまう方が楽だと思います。

つまりは…

• 画像は「インライン要素」だから隙間ができる。
• 解決方法1：display: block
• 解決方法2：vertical-align: bottom

って、ことですね！

ということで、“画像の下に”謎の隙間”ができるのを解決するCSS”でした！でわでわっ！