CSS dtの中に画像を入れた時に

質問

CSS dtの中に画像を入れた時に

dtの文字が下にずれてしまいます。
画像を消すと問題無いので、画像の指定に原因があると思うのですが・・・。

■css ----------------------------------------

.sub{
clear:both;
width:420px;
}

.sub dt{
float:left;
padding:0 0 0 0;
width:200px;
height:38px;
line-height:38px;
background:url(../img/sub-bg2.jpg) no-repeat;
font-size:1em;
border-top:1px solid #f4e9bf;
border-bottom:1px solid #f4e9bf;
}

.sub dt img{
padding:0 0 0 0;
width:4px;
height:38px;
}

.sub-menu dd{
float:right;
width:180px;
height:38px;
line-height:38px;
font-size:1em;
background-color:#ffffcc;
text-align:right;
border-top:1px solid #f4e9bf;
border-bottom:1px solid #f4e9bf;
}
■html ---------------------------------------

<dl class="sub">
<dt><img src="../img/a.png" width="4" height="38" alt="aa" />テキスト</dt>
<dd>あいうえお</dd>
</dl>

お分かりになる方、宜しくお願いします。

回答No.1

神崎 渉瑠（@taloo） · ベストアンサー

.sub dt img{
padding:0 0 0 0;
width:4px;
height:38px;
vertical-align: top; /* 追加 */
}

未検証です。

お礼

ありがとうございます！
追加したところ、ずれが直りました！