Nexus 9
PS4
Intuos Pro
Core i7-4790K
ページの先頭へ
トップに戻る
2013年12月3日 Web制作

【CSS】画像の下に謎の余白ができちゃう問題を解決する方法


imgspace地味に困るよね。
Webサイトを作っていると、画像の下に意図していない余白が生まれてしまうことがあります。
文章で書いても分かり辛いので、背景色付きのボックス内に画像を配置して実際に再現してみましょう。
Dummy

画像の下に謎のスペースが出来ていますね。
それでは、さっさと解決しましょう。

vertical-align: bottom;

Dummy

block要素にする

Dummy

font-size , line-height → 0

Dummy

対策としては、以上の3つが挙げられます。
どの方法を使ってもいいんですが、3番目の方法はちょっと無理矢理な感じが否めないですね…

なんで余白ができるの?

忘れがちですが、画像はインライン要素です。なので特に指定をしなかった場合、配置されるのはベースラインになります。
だからvertical-alignをbottom(下端揃え)にすると下の余白が無くなるんですね。

display:blockで画像自体をブロック化するというのが1番簡単ですが、その場合text-alignでの中央寄せが効かなくなるので注意。中央寄せしたい時はmargin: 0 autoを使いましょう。
関連するかもしれない記事