カテゴリー 未分類 リスト内にイメージを配置すると4pxの余白ができる 投稿者 作成者: +39 投稿日 2006/04/28 リスト内にイメージを配置すると4pxの余白ができる への2件のコメント Nucleusに限らないのだけど、などのリストの中にイメージを配置した場合、padding-bottom:4pxのような隙間ができます。これはverticval-alignを定義することで回避します。 ただし隙間が発生する原因は不明です。 img{ vertical-align: bottom; } これIEだけ限定の問題だと思っていたのだけど、firefox1.5でも発生しました・・。（他の原因だろうか？） まぁなんというかCSSはめんどくさいな・・。 ← 伊藤美咲に似ている → seamonkey 「リスト内にイメージを配置すると4pxの余白ができる」への2件の返信 >ただし隙間が発生する原因は不明です これはまさにvertical-lignによって生じるもので、これの初期値が’baseline’になっているからです。なのでディセンダ分の余白的なものが画像の下側に確保されるわけですね。 http://www.w3.org/TR/CSS2/visudet.html#propdef-vertical-align したがって > vertical-align: bottom; という対処法はまったくもって真っ当で正解です。 神からお墨付きをいただきましたｗ コメントを残すメールアドレスが公開されることはありません。 ※ が付いている欄は必須項目ですコメント ※ 名前 ※ メール ※ サイト 次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。
>ただし隙間が発生する原因は不明です これはまさにvertical-lignによって生じるもので、これの初期値が’baseline’になっているからです。なのでディセンダ分の余白的なものが画像の下側に確保されるわけですね。 http://www.w3.org/TR/CSS2/visudet.html#propdef-vertical-align したがって > vertical-align: bottom; という対処法はまったくもって真っ当で正解です。
「リスト内にイメージを配置すると4pxの余白ができる」への2件の返信
>ただし隙間が発生する原因は不明です
これはまさにvertical-lignによって生じるもので、これの初期値が’baseline’になっているからです。なのでディセンダ分の余白的なものが画像の下側に確保されるわけですね。
http://www.w3.org/TR/CSS2/visudet.html#propdef-vertical-align
したがって
> vertical-align: bottom;
という対処法はまったくもって真っ当で正解です。
神からお墨付きをいただきましたｗ