Problem med bilder i <SPAN>

Jag har problem när jag vill sätta en annan radhöjd än defult med bilder. Det fungerar utmärkt med bara textrader, men om jag har små ikoner framför varje rad blir det ihoptryckt.

Någon som har någon lösning på detta?
(det fungarar bra om man tar bort bilderna)

<div>
<span style="line-height: 50px">
<IMG SRC="/1.gif" WIDTH="13" HEIGHT="13">
Rad 1<br>
<IMG SRC="/2.gif" WIDTH="13" HEIGHT="13">
Rad 2<br>
<IMG SRC="/3.gif" WIDTH="13" HEIGHT="13">
Rad 3<br>
<IMG SRC="/4.gif" WIDTH="13" HEIGHT="13">
Rad 4<br>
</span>
</div>

// Mattias

Vet inte om detta är en fusklösning men så här har jag gjort tidigare:

<div>
<span style="line-height: 50px">
<img src="/spacer.gif" width="1" height="40"><br>
<IMG SRC="/1.gif" WIDTH="13" HEIGHT="13">
Rad 1<br>
<img src="/spacer.gif" width="1" height="40"><br>
<IMG SRC="/2.gif" WIDTH="13" HEIGHT="13">
Rad 2<br>
<img src="/spacer.gif" width="1" height="40"><br>
<IMG SRC="/3.gif" WIDTH="13" HEIGHT="13">
Rad 3<br>
<img src="/spacer.gif" width="1" height="40"><br>
<IMG SRC="/4.gif" WIDTH="13" HEIGHT="13">
Rad 4<br>
</span>
</div>

spacer.gif motsvarar en transparent bild 1 x 1 px

Det är klart man kan göra så, men det är klart en "fusklösning".

Det måste finnas något sätt att göra det "på riktigt" utan att få massa kod.

Någon som vet?

// M

Din urprungliga metod verkar fungera fint i Gecko och Opera, att den inte fungerar i IE beror troligen på en bugg. Du skulle kunna prova att ge varje bild en top+bottom margin istället:

img {
margin: 18px 0;
vertical-align: middle;
}