Firefoxで上の画像と下の画像にすき間が出来てしまう場合の対処法

Webデザイナー・コーダーは、ブラウザごとの表示の違いに悩まされることが多いですよね。

Firefox

今回はFirefoxで見ると上の画像と下の画像の間にすき間が出来てしまう場合の対処法を紹介します。

上下の画像にすき間が出来てしまう時の解決方法

<div class="Rbox">
<h2><img alt="商品リスト" src="img/title_list.png"></h2>
<img src="images/bn.png">
<div class="text">浅草・合羽橋「釜浅の鉄打出しフライパン」</div>
</div>

この場合、h2とimgの間に謎のスペースが生まれることがあります。

対応策としては、CSSで”line-height:0″を指定すればOKです。

.Rbox {
    margin: 0;
    padding: 0;
    line-height: 0;
}

ただし、ボックス内にテキストがある場合は行間が詰まってしまうので注意。上の例だと「.Rbox」ではなく「.Rbox h2」に”line-height:0″を入れると綺麗に表示されます。