リストをfloatで横並びにする際、画像の下に余白が空く

|

HTMLで画像を指定したメニューをfloatで横並びにしたくて、実際に以下の記事を参考にCSSでロールオーバーメニューを作っていたときの事です。

なぜか、画像の下に余白が開いてしまうことに気づきました。参考元の以下の記事では、そんなことが起こってはいませんでした。

これから推測するに、真っ先に思いついたのが、DOCTYPE宣言の違い。私は、「xhtml1-transitional.dtd」だったのですが、CSS-EBLOGさんのデモページでは「xhtml1-strict.dtd」でした。

試しにxhtml1-strict.dtdにしてみると、下の隙間は空きませんでした。

(X)HTMLコード

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

ただ、それだけのためにDOCTYPE宣言を変えるのは他にも影響が出そうでなかなか難しいですよね。

画像の下に余白が空いていたのですが、それがulの領域が広がっていたためというのが、FirofoxのWeb Developerを使ってわかったので、単純に思いつくのが、「line-height」が悪さをしているのではないかということ。ulかliに「line-height:0;」というように、値を0にすると、隙間が空かなくなりました。

CSSコード

ul {
   line-height:0;
}

あるいは

CSSコード

li {
   line-height:0;
}

逆に、DOCTYPE宣言が「xhtml1-strict.dtd」で、ulかliに「line-height:0;」を指定してしまうと、余白が空いてしまうようです。どうしてこのようなことが起こるのかよくわかりません。

ちなみに「xhtml1-transitional.dtd」で余白が空いてしまうのは、Firefox、Google Chome、Safari(Windows XP)でした。「xhtml1-strict.dtd」でulかliに「line-height:0;」でレイアウトが崩れてしまうのが、Firefox、Operaでした。

IE6と7は特に不具合は起こりませんでしたが、IE8だけは「xhtml1-transitional.dtd」かつ「line-height:0;」を指定すると余白は消えましたが、「xhtml1-strict.dtd」だけでは余白は消えず、「xhtml1-strict.dtd」かつ「line-height:0;」をすると、余白は消えました。謎ですね。

要約すると、隙間を空けないようにするには、DOCTYPE宣言を

(X)HTMLコード

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

にして、CSSにて、

CSSコード

ul {
   line-height:0;
}

あるいは

CSSコード

li {
   line-height:0;
}

を指定します。

このページに関連する記事

最近のブログ記事