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

画像の下に"謎の隙間"ができるのを解決する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”でした!でわでわっ!

スポンサーリンク
画像の下に"謎の隙間"ができるのを解決するCSS

コメントを残す

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