2015年3月 5日(木) 12時12分56秒 [仕事]

画像の下部に余計な空間が見えるのを防ぐCSS

背景色や背景画像を加えているボックスの内部に、何らかの画像を掲載すると、画像の下側に意図しない空間ができてしまうことがあります。
この無駄な空間ができる原因は、「画像の下端がどこに揃うよう表示されるか」というCSSの仕様にあります。

その詳しい原因と、余計な空間を消せるCSSの書き方を、2005年にAll Aboutで解説記事にしていました。それを先日、9年ぶりに全面改稿。

◆画像の下に謎の隙間ができるのを防ぐ方法（＠All About ホームページ作成）

余計な空間が現れてしまう原因を詳しく図解したので、記事自体は3ページあるんですが、記述する必要のあるCSSソースはたった1行(vertical-alignプロパティで配置を調整するだけ)なので、とても簡単です。(^_^;)