img要素の下に隙間が出来てしまうのを修正する【html・CSS】

自社運営のコラム・キュレーションサイトの中で、aタグで囲ったサムネイル画像などのimg要素の下に変な隙間が出来ていたので、CSSで修正する。

↑このように、画像の下部分に隙間が空いてしまう…。

なぜimg要素に隙間が出来てしまうのか？

結論、インライン要素だから。
img要素は、デフォルトだとインライン要素なので、テキストと同じようにベースラインに合ってしまう為、不自然な隙間が空いてしまう。
対処としては、img要素をブロック要素にするか、imgにvertical-align:baseline;以外で指定する方法がある。

img要素をブロック要素にする

【html】

<div class="back_gray1">
<img src="画像ソース" alt="画像">
</div>

【css】

.back_gray1{
width:100%;
background-color:#999999;
}
.back_gray1 img{
display:block;
}

img要素のスタイルvertical-align:bottom;等を指定する

【css】

.back_gray1{
width:100%;
background-color:#999999;
}
.back_gray1 img{
vertical-align:bottom;
}

インライン要素のまま隙間をなくす。
前述したように、imgはインライン要素でデフォルトはvertical-align:baseline;となっており、下に隙間が出来てしまう。この隙間必要なければ、img全体にCSSでこの指定をすると良いだろう。

↑下の隙間がなくなる！