« 伊藤美咲に似ている | Home | seamonkey »

Apr 282006

リスト内にイメージを配置すると4pxの余白ができる

Nucleusに限らないのだけど、<li><dd>などのリストの中にイメージを配置した場合、padding-bottom:4pxのような隙間ができます。これはverticval-alignを定義することで回避します。
ただし隙間が発生する原因は不明です。

img{
vertical-align: bottom;
}
これIEだけ限定の問題だと思っていたのだけど、firefox1.5でも発生しました・・。(他の原因だろうか?) まぁなんというかCSSはめんどくさいな・・。

2 Comments

>ただし隙間が発生する原因は不明です

これはまさにvertical-lignによって生じるもので、これの初期値が'baseline'になっているからです。なのでディセンダ分の余白的なものが画像の下側に確保されるわけですね。

http://www.w3.org/TR/CSS2/visudet.html#propdef-vertical-align

したがって
> vertical-align: bottom;
という対処法はまったくもって真っ当で正解です。

神からお墨付きをいただきましたw

Leave a comment

Search and Archives