画像の下に隙間ができるときの対応

ブロック要素内に画像を配置した時、画像の下にわずかな隙間ができてしまうことがあります。
だいたいの場合は気にしなくて問題ないのですが、親要素に背景を指定している場合や、次の要素とピッタリ並べたい場合は対応が必要になります。

サンプルコード1

例として、角丸+ドロップシャドウの枠組みを、IE8以下でも対応できるように画像で作成してみます。

HTML

<div id="sample">
<div class="top"><img src="./top.jpg" width="500" height="15" alt="" /></div>
<div class="middle">サンプル</div>
<div class="bottom"><img src="./bottom.jpg" width="500" height="15" alt="" /></div>
</div>

CSS

#sample .middle {
	background: url(middle.jpg) center top repeat-y;
}

画像の下に隙間ができるときの対応のデモページ

top.jpgとbottom.jpgが枠組みの上部と下部になり、真ん中部分のmiddle.jpgは.middleの背景で繰り返すようにしています。
デモページを見ると、枠組みの上部と真ん中部分の間に隙間ができていると思います。
　

対応方法

隙間ができる原因は、vertical-alignの初期値がbaselineであるためです。
そのため、画像のvertical-alignの値をbottomに変更することで対応できます。

CSS

#sample .top img {
	vertical-align: bottom;
}

画像の下に隙間ができるときの対応のデモページ2

または、画像をdisplay: block;でブロック要素にすることでも対応できます。

CSS

#sample .top img {
	display: block;
}

ただし、親要素でtext-align: center;を指定して中央揃えにしていたりする場合、ブロック要素に変更すると効かなくなるので注意が必要です。
　

サンプルコード2

上記サンプルとそれほど変わりませんが、#sampleの背景で真ん中部分を指定して、その子要素で上部と下部の枠組みを配置するパターンです。

HTML

<div id="sample">
<div class="top"><img src="./top.jpg" width="500" height="15" alt="" /></div>
<p>サンプル</p>
<div class="bottom"><img src="./bottom.jpg" width="500" height="15" alt="" /></div>
</div>

CSS

#sample {
	background: url(middle.jpg) center top repeat-y;
}

この場合、下部の枠組みの下に真ん中部分の枠がはみ出しています。

画像の下に隙間ができるときの対応のデモページ3

この場合も同様に、vertical-align: bottom;かdisplay: block;を指定することで対応できます。

CSS

#sample .bottom img {
	vertical-align: bottom;
}

画像の下に隙間ができるときの対応のデモページ4