CSSテクニックコミュのbottomに4pxのスペースが空く

皆様初めまして。
詰まってしまい、どなたかご教授願います。

単純なCSSなんですが、画像を設置すると
必ず、bottomに4pxのスペースが空いてしまいます。

【テストページ】
http://urumaworks.net/css/csstest.html

【CSS】
*{
margin: 0px;
padding: 0px;
}
img{
border: 0px;
}
#container{
width: 800px;
}
#header{
width: 800px;
border-left: 20px solid #FA1300;
}

上記のCSSのとおり、margin、paddingともに0pxを
設定していますが、必ずスペースが空いてしまいます。
何が問題なのでしょうか？

コメント(3)

最初
全て
最新の40件

[1] mixiユーザー 11月01日 00:50

IEでは改行が影響してしまっていると思います。
<div id="header"><img src="css_test.gif"></div>
のように記述するか、

もしくは
img { vertical-align: bottom; }
とすると良いと思います。

vertical-alignの初期値はbaselineとなっていて、
この場合のbaselineとは、フォントのディセンダは含みません。つまり、「g」とか「y」、それから「q」といった文字の下端に揃えるのではなく、「m」や「e」といった文字の下端に揃える感じです。

だからFirefoxなどでも、
<div id="header"><img src="css_test.gif" width="100" height="100">aaa</div>
のように、画像の隣に適当にテキストを置けば、IEと同じように#headerのボックスの下辺との間にわずかな隙間ができてしまいます。

vertical-align: bottom;と指定しておけば、フォントどうこうではなく、行ボックスの下辺とボックスの下辺とを揃えてくれますので、そういった隙間はなくなるかと思います。

[3] mixiユーザー 11月02日 08:37

かわち丸さん、Doctor Musicさん、回答ありがとうございます。

＞かわち丸さん
"vertical-align: bottom;"と指定することで
無事解決することができました。
フォントどうこうではなく、画像までもディセンダの
影響を受けるんですね…

＞Doctor Musicさん
実は。。backgroundの方法一度試してました…
ただ、その場合印刷時に画像が表示されないという点で
他の方法がないか探してたんです…

ログインすると、みんなのコメントがもっと見れるよ