※ ChatGPTを利用し、要約された質問です（原文：IE7だけに出る謎の空白（CSS）の解決方法）
IE7で発生する謎の空白（CSS）の解決方法
このQ&Aのポイント
IE7でだけ表示される謎の空白の原因と解決方法について教えてください。
特定のHTML要素の間にIE7でだけ謎の空白が表示される問題が発生しています。どのように解決すればよいでしょうか？
IE7で発生する空白の原因と解決策について詳しく教えてください。
以前も似たような症状が出たのですが・・・
IE７でだけ、謎の空白が約3px程度出てしまいます。場所は<dl></dl>と<img>の間です。
イメージとしては上から3段をくっつけて中身（<dl></dl>）だけ高さを可変にしてひとつの枠のように見せたいと考えています。
ですがIE７でだけ空白ができてしまうのです。
原因と解決方法を教えていただけないでしょうか？
<div id="right">
<img class="top" src="img/bg-rtop.gif" />
<dl>
<dt><img src="img/right-tit1.gif" /></dt>
<dd>ああああああああああああああああああああああああああああああ</dd>
<dt><img src="img/right-tit2.gif" width="200" height="20" /></dt>
<dd>ああああああああああああああああああああああああ</dd>
<dt><img src="img/right-tit3.gif" width="200" height="20" /></dt>
<dd>ああああああああああああああああああああああああああああああああ</dd>
<dt><img src="img/right-tit4.gif" width="200" height="20" /></dt>
<dd>あああああああああああああああああああああああああ</dd>
</dl>
<!-- ここで空白ができてしまう・・・-->
<img class="under" src="img/bg-runder.gif" />
</div>
■CSS
@charset "shift_jis";
body {
text-align: center;
margin: 0px;
background-image: url(img/bg.gif);
vertical-align: bottom;
line-height: 165%;
letter-spacing: 1px;
font-size: 12px;
}
/* 右側の設定*/
#right{
width:200px;
float:right;
}
#right .top {
margin: 20px 0 0 0;
}
#right dl {
background-image: url(img/bg-rmiddle.gif);
margin: 0px;
padding: 0 0 20px 0;
}
#right dt {
padding: 10px 0 0 0;
}
#right dd {
margin: 10px 0 0 12px;
padding: 0 0 0 0;
}
#right .under {
margin: 0px;
}
一部省略してます・・・
どうかよろしくお願いいたします。
