私が使うとパソコンの寿命が短くなる…四条せつなです。
Web制作をしていると、画像の下に”謎の隙間”が出来てしまうことがあると思います。これって、凄い厄介ですよね…でもでも、これはちゃーんとした理由があって出来たものです。

コピペで画像の隙間を解決できるようにしてます!何故そうなるかの解説も書いておきますね!
画像の下に隙間ができちゃう例
おそらく、普通にWeb制作をしていると上のような感じになるんじゃないか?と思います。

よーく見てもらうと、画像の下に余白があるのが分かると思います。これを解決する方法を今から紹介していきますね!
解決方法は2つあるよ!
この画像の下の“謎の隙間”問題。解決方法は2つあります。どちらも有効なのですが、アプローチが違うので両方ともご紹介しますね。
方法1:display: block
1つ目の方法は、画像を「ブロック要素」にするものです!

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

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

つまりは…
- 画像は「インライン要素」だから隙間ができる。
- 解決方法1:display: block
- 解決方法2:vertical-align: bottom
って、ことですね!
ということで、“画像の下に”謎の隙間”ができるのを解決するCSS”でした!でわでわっ!
コメントを残す
コメントを投稿するにはログインしてください。