ブロック要素内に画像を配置した時、画像の下にわずかな隙間ができてしまうことがあります。
だいたいの場合は気にしなくて問題ないのですが、親要素に背景を指定している場合や、次の要素とピッタリ並べたい場合は対応が必要になります。
サンプルコード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 ; } |
コメントが承認されるまで時間がかかります。