ブロック要素内に画像を配置した時、画像の下にわずかな隙間ができてしまうことがあります。
だいたいの場合は気にしなくて問題ないのですが、親要素に背景を指定している場合や、次の要素とピッタリ並べたい場合は対応が必要になります。
サンプルコード1
例として、角丸+ドロップシャドウの枠組みを、IE8以下でも対応できるように画像で作成してみます。
HTML
1 2 3 4 5 | <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
1 2 3 | #sample .middle { background: url(middle.jpg) center top repeat-y;} |
top.jpgとbottom.jpgが枠組みの上部と下部になり、真ん中部分のmiddle.jpgは.middleの背景で繰り返すようにしています。
デモページを見ると、枠組みの上部と真ん中部分の間に隙間ができていると思います。
対応方法
隙間ができる原因は、vertical-alignの初期値がbaselineであるためです。
そのため、画像のvertical-alignの値をbottomに変更することで対応できます。
CSS
1 2 3 | #sample .top img { vertical-align: bottom;} |
または、画像をdisplay: block;でブロック要素にすることでも対応できます。
CSS
1 2 3 | #sample .top img { display: block;} |
ただし、親要素でtext-align: center;を指定して中央揃えにしていたりする場合、ブロック要素に変更すると効かなくなるので注意が必要です。
サンプルコード2
上記サンプルとそれほど変わりませんが、#sampleの背景で真ん中部分を指定して、その子要素で上部と下部の枠組みを配置するパターンです。
HTML
1 2 3 4 5 | <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
1 2 3 | #sample { background: url(middle.jpg) center top repeat-y;} |
この場合、下部の枠組みの下に真ん中部分の枠がはみ出しています。
この場合も同様に、vertical-align: bottom;かdisplay: block;を指定することで対応できます。
CSS
1 2 3 | #sample .bottom img { vertical-align: bottom;} |
コメントが承認されるまで時間がかかります。