画像の下にできる余白をCSSで除去する方法

画像の下にできる余白をCSSで除去する方法

画像の下にできる余白をCSSで除去する方法

LPなどを制作する場合に、画像をスライスして縦に並べることがあると思います。その際、普通にコーディングすると、画像と画像の間に謎の余白ができてしまいます。

例えば、以下のようなHTMLがあったとします。


<div class="container">
 <img src="images/image1.jpg">
 <img src="images/image2.jpg">
 <img src="images/image3.jpg">
</div>

CSSは以下の通りです。


.container{
width: 640px;
margin: 0 auto;
}
img{
margin: 0;
padding: 0;
}

この場合、画像のmarginとpaddingが0に指定されているにも関わらず、以下のように余白ができてしまいます。わかりやすくするために背景色をつけています。

画像の下に余白ができる

このように、画像がぶつ切り状態になってしまいます。これではデザインに影響してしまう可能性もありますね。

LPなど画像を縦に敷き詰めたい場合は、こんなぶつ切り状態では完全にアウトです。

と、前置きが長くなってしまいましたが、今回はこの余白をCSSで除去する方法を紹介したいと思います。

画像の下にできる余白をCSSで除去する方法

画像の下にできてしまう余白は、CSSで以下のように指定すれば解決します。

img{
vertical-align: bottom;
}

たったのこれだけで、余白はなくなります。上記だとすべての画像に作用するので、一部だけに適用したい場合はセレクタを変更してください。

あとがき

ちなみに以下のように「vertical-align: top;」でも余白はなくなります。

img{
vertical-align: top;
}

画像の下に謎の余白ができて困っているという方は、ぜひお試しください。

この記事が気に入ったら
いいね!してね♪

Twitter で

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です