Firefoxでの画像の縦の隙間をなくしたい

質問

現在Dreamweaver8でサイトを作成中の初心者です。
画像を縦に並べて表示したいのですが、<br>のタグを入れてないところはIE6,7だと隙間なく表示されるのですが、Firefoxだとどうも隙間が出来てしまいます。

ネットや本で自分なりに調べて試したつもりですが、どうにも解決できませんので、お手数ですがどなたかご協力頂けますようよろしくお願いいたします。

参考までにhtmlとcssです。
html部分
<div id="sidenavi">
<p><a href="jjj/index.html"><img src="image/xxx.jpg" width="245" height="79" border="0"></a></p>
<p><a href="jjj/index.html"><img src="image/yyy.jpg" width="245" height="79" border="0"></a></p>
<br>
<p><img src="image/zzz.jpg" width="245" height="40"></p>
<p><img src="image/aaa.jpg" width="245" height="80"></p><br>
<p><img src="image/aaa.jpg" width="245" height="106"></p>
</div>

css部分
#contents #sidenavi {
padding: 0px;
height: 450px;
width: 245px;
float: right;
margin-top: 0px;
margin-right: 5px;
margin-bottom: 0px;
margin-left: 0px;
}
#sidenavi p {
margin-top : 0;
margin-bottom : 0;
padding-top: 0px;
}

回答No.1

abril · ベストアンサー

DOCTYPE宣言はどうなっていますか？それにより、標準準拠・後方互換モードが切り替わります。
本件の場合、Firefox（ver.2/3）での挙動を検証してみたところ：

・HTML 4.01 Transitional（システム識別子付）では隙間はできない
・HTML 4.01 Strict（システム識別子付）では隙間はできる

ですので、モードによってこの部分のCSSの解釈には差が出る様です。
下記にどの条件の時にどのモードになるかが一覧にまとめられたお役立ちのサイトがありますので、参考までに。
【参考】http://2xup.org/log/2007/07/27-2111

ただ、質問者様が現在のDOCTYPEを選択されているのには理由がお有りでしょうから（DOCTYPEによってHTMLの書き方も変えなければならない場合がありますから）、DOCTYPEだけをすげ替えれば良いというものではありませんので、その点は誤解されません様に。

もし、pの子要素が質問文のソースの様に、画像しかない（テキストがない）のであれば、一例として、#sidenavi p {～}にline-height: 0;を追加指定する事でいずれのモードでもFirefoxでの隙間を解消する事ができます。

ちなみに、p（段落：ブロック要素、前後に改行を含む）とpの間を空ける為に<br>（インライン内容の強制改行）を使うというのは本末転倒ですので、一行空きにしたいpにclass属性を設けて、classセレクタで下マージンを設定してあげる方が適切です。

#sidenavi p.hoge {
margin-bottom: 1em;
}

<p class="hoge"><a href="jjj/index.html"><img src="image/yyy.jpg" width="245" height="79" border="0"></a></p>

という感じで。

お礼

abril様

いつも丁寧で親切な回答を頂き、本当に有難うございます。

#sidenavi p {～}にline-height: 0;を追加したら無事解決しました。

その他頂きました情報を活かし、さらに勉強していきます。

本当に有難うございました。