divで囲んだimgタグの下にできる余白を消すCSS
画像をレイアウトする時にdivで囲むことはよくあると思いますが、指定していない余白ができてしまうことがあります。
CSSに1行追加するだけで解消することができますので紹介します。
sponsored link
divで囲んだimgタグに謎の余白が出た時の対処法
今回使用するコードはこちらです。
|
1 2 3 |
<div> <p><img src="#" alt="" width="1500" height="1000"></p> </div> |
全体をdivで囲み、その中にpタグで囲んだimgタグがあります。
すると下の画像のようにimgタグの下にmarginでもpaddingでもない余白（青い部分）ができてしまうことがあります。（pタグがなくても余白はできます）
通常はあまり気にならないくらいの余白ですが、borderで囲んだりしているとバランスが崩れているのが目立ってしまいます。
今回はこの余白をなくすためのCSSを2つ紹介します。
display: block; で画像をブロック要素にする
通常imgタグはインライン要素なのでデフォルトではvertical-align: baseline; となります。これが余白の原因のようです。
imgタグをブロック要素に指定してあげると余白を消すことができます。
|
1 2 3 |
img { display: block; } |
vertical-align: bottom; で位置を下に揃える
先ほどはブロック要素にして解消しましたが、imgタグにvertical-align: bottom; と指定して下端揃えにすることでも余白をなくすことができます。
こちらの方がレイアウトに影響をほとんど与えないので使い勝手がよさそうです。
|
1 2 3 |
img { vertical-align: bottom; } |
要素の検証でも原因がつかめないのがやっかいですが、分かってしまえば1行のCSSで直せます。
ベースラインは日本語では関係ないと思いきや、こういうところに落とし穴があるんですね。
参考にしたエントリー