画像の下にできる隙間
- 2007年03月01日
- category:XHTML/CSS
- Comment(0)
- Trackback(0)
CSSでコーディングしているときに画像の下に謎の隙間ができることがあります。今回はその原因と対象方法について書きたいと思います。実際、以下のようになります。
ソースは以下です。
<div>
<img src="/sample/image/sample.gif alt="sample" />abcdefg
</div>
div{
background:#F00;
width:200px;
}この現象の原因はCSSのプロパティでインライン要素の垂直位置を指定する、vertical-alignにあります。このvertical-alignのデフォルト値は、IEなどのメジャーなブラウザではbaselineに設定されているからです。vertical-alignの値の意味は下記サイトに載っていました。
vertical-align CSS辞典
つまり”g”とか”j”とか下にはみ出るアルファベットのはみ出た長さの分だけ隙間ができるわけです。なので対処ほうとしてはvertical-alignにbottomやtext-bottomを指定すれば解消されます。
<div>
<img src="/sample/image/sample.gif alt="sample" />abcdefg
</div>
div{
background:#F00;
width:200px;
}
img{
vertical-align:bottom;
}注意点としてはvertical-alignはインライン要素の垂直方向を指定するプロパティなので、divではなくimgのほうに指定するということです。ちなみにAll Aboutでさらにわかりやすく解説されていました。
- Prev Entry
- divタグの意味と使い方
- Next Entry
- SEOについての僕なりの見解
トラックバックURL
http://webtech-walker.com/archive/2007/03/01143619.html/trackback
※トラックバックを受け付けてから表示するまでにしばらく時間がかかる場合があります。
