カテゴリー
未分類

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

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

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

「リスト内にイメージを配置すると4pxの余白ができる」への2件の返信

>ただし隙間が発生する原因は不明です
これはまさにvertical-lignによって生じるもので、これの初期値が’baseline’になっているからです。なのでディセンダ分の余白的なものが画像の下側に確保されるわけですね。
http://www.w3.org/TR/CSS2/visudet.html#propdef-vertical-align
したがって
> vertical-align: bottom;
という対処法はまったくもって真っ当で正解です。

コメントを残す

メールアドレスが公開されることはありません。