画像の下にできる隙間をなくす方法。

画像をdivやh1タグなどのブロック要素に入れると画像の下に数ピクセルほどの隙間ができてしまいます。気にするほどのことでもない範囲ではありますが、デザイン上1pxのずれもだしたくない場合はこの不要な余白を取り除く必要があります。ここではそれを解決する3つの方法を紹介します。

 

まず通常だと下記のように画像とその下の赤いボーダーの間にスペースができてしまいます。

 

解決法1 CSSで画像のdisplay属性をblockに指定する。

img{
     display:block;
}

 

解決法2 CSSで画像のvertical-alignをbottomに指定する。

img{
     vertical-align: bottom;
}

 

解決法3 CSSで親ブロックのline-heightを0にする。

.box{
     line-height:0;
}