ページの先頭へ
トップに戻る
2017年1月20日 Web制作

【CSS】画像の下に生まれる謎の余白問題を解決する方法

深夜のテンションでサムネ画像作ったらこんなことになりました。いい感じにハイになってます。

…さて、Webサイトの制作時、画像の下に謎の余白が生まれることがありますよね?これ、初心者の方は結構悩みそうなので、理由と解決方法を載せておきます。

まずはサンプルを

分かりやすく、黒いボックスの中に画像を配置しました。下に余白が出来ていますね。
ちなみに写真は愛車のCBR400Rちゃんです。

謎の余白が生まれる理由

これ結構忘れがちなんですが、画像ってテキストと同じインライン要素なんですよね。なので、配置されるのは下端ではなくベースラインです。このベースラインと下端の間が、余白として現れてしまいます。
あ、ベースラインって何ぞや?って人はググってね。

解決方法

display: block

画像をブロック要素にするのが一番簡単な方法です。
なお、ブロック要素にはtext-alignが効かないので、中央寄せしたいならmargin: 0 autoを使いましょう。

vertical-align: bottom

縦方向の揃え位置を下端に指定するvertical-align: bottomを使えば、画像は下にベッタリ張り付きます。

まとめ

2通りの方法を紹介しましたが、特に理由が無ければブロック要素化するのが一番楽です。インライン要素のままだとどうも扱いにくくてね…