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;
}
画像の下に謎の余白ができて困っているという方は、ぜひお試しください。