CSSで画像の下のスペースをなくすには？

質問

よろしくお願いします。
http://www.apple.com/jp/のようなナビゲーションタブ(？)をCSSでやろうと考えて、XHTML1.0strictで
<div id="Navi01">
<img src="tab1.gif" alt=" " /><img…>・・・
</div>
<div id="Navi02">
<p>あああ</p>
</div>

CSSで、
div#Navi01{margin: 0; vartical-align: middle;}
div#Navi02{margin: 0; background-color: #00007f; color: white; font-size: small;}
img{margin: 0; padding: 0; line-height: 0; vartical-align: middle;}
と、記述していますが、Navi01の画像とNavi02のBOXの間に隙間が空きます。
この隙間は、どうやって無くせば良いのでしょうか？

回答No.1

quads · ベストアンサー

<div id="Navi01">
<img src="tab1.gif" alt=" " /><img…>・・・
</div>
<div id="Navi02">
◆ <p>あああ</p>
</div>

p 要素に適用されている（デフォルト）スタイルシートの margin あるいは padding による領域ではないでしょうか？

それより、div 要素直下にインラインがあるのは不正です。
また、img 要素の連続は不適切なように思います。
img 要素に対する line-height: 0; は何でしょうか。

アップルのページを拝見しても、理想とされている表示が想像できないので具体的な回答ができません。

お礼

ごめんなさい、補足の補足です。
実際には、各<img>は<a>でそれぞれのページにリンクさせ、
Navi01をセンタリングしないとダメですね。

飛んだ先のページのタブはNavi02の背景色と同じになって、
タブの下のラインとつながり、それ以外のタブは別の色になっている。
という事をやりたかったのです。解りにくいかな？

borderで処理していないのは、Navi02の下にもう一つNavi03を作るためです。

ちょっと試しに作ったのですが、隙間が空くので質問してみたのです。

補足

お返事ありがとうございます。
>div 要素直下にインラインがあるのは不正です。
W3Cのチェックは通るのですが…

>また、img 要素の連続は不適切なように思います。
<img>の連続はタブとタブの間にスペースを空けないための処置です。

>理想とされている表示が想像できないので具体的な回答ができません。
Navi02の背景色と<img>の画像の色をそろえているのです。
画像を使っているのは上部の角丸を出すためです。

Opera9で要素のアウトラインを表示すると、<img>のほうによけいな隙間があるようなので、もしや？と思い入れましたが、関係なかったです。