divで囲んだimgタグの下にできる余白を消すCSS

画像をレイアウトする時にdivで囲むことはよくあると思いますが、指定していない余白ができてしまうことがあります。
CSSに1行追加するだけで解消することができますので紹介します。

divで囲んだimgタグに謎の余白が出た時の対処法

今回使用するコードはこちらです。

<div>

</div>

全体をdivで囲み、その中にpタグで囲んだimgタグがあります。
すると下の画像のようにimgタグの下にmarginでもpaddingでもない余白（青い部分）ができてしまうことがあります。（pタグがなくても余白はできます）

画像に余白が入ってしまっている

通常はあまり気にならないくらいの余白ですが、borderで囲んだりしているとバランスが崩れているのが目立ってしまいます。
今回はこの余白をなくすためのCSSを2つ紹介します。

通常imgタグはインライン要素なのでデフォルトではvertical-align: baseline; となります。これが余白の原因のようです。
imgタグをブロック要素に指定してあげると余白を消すことができます。

余白がなくなった

img {

display: block;

}

先ほどはブロック要素にして解消しましたが、imgタグにvertical-align: bottom; と指定して下端揃えにすることでも余白をなくすことができます。
こちらの方がレイアウトに影響をほとんど与えないので使い勝手がよさそうです。

img {

vertical-align: bottom;

}

要素の検証でも原因がつかめないのがやっかいですが、分かってしまえば1行のCSSで直せます。
ベースラインは日本語では関係ないと思いきや、こういうところに落とし穴があるんですね。

参考にしたエントリー