cssのulを使い、liごとに違うイメージをbackground-imageで指定し、そのliにテキストを入力しています。liは15個くらいあります。

liのサイズをイメージのサイズと同じにして、paddingで内側に余白を取りたいのですが、イメージのサイズより広がってしまいます。

テキストは短いのから長いのまであって、長いときにはBRを使わずに余白で折り返したいのですが、うまくイメージ内に収まってくれません。


cssは独学ですので、きっと間違いだらけだと思います。

どなたかどうぞ宜しくお願いします。


#contents #img1 #li1 {
background-image:url(../images/■■.gif);
background-repeat:no-repeat;
width:302x;
height:60px;
margin-top:0px;
margin-right:0px;
margin-bottom:0px;
margin-left:0px;
padding-top:0px;
padding-right:0px;
padding-bottom:0px;
padding-left:0px;
}

#contents #img1 #li2 {
background-image:url(../images/●●.gif);
background-repeat:no-repeat;
width:302px;
height:63px;
margin-top:0px;
margin-right:0px;
margin-bottom:0px;
margin-left:0px;
padding-top:0px;
padding-right:0px;
padding-bottom:0px;
padding-left:0px;
}


<div id="contents">
<ul id="img1">
<li id="li1">ああああああああ</li>
<li id="li2">いいいいいいいいいいいいいいいいいいいいいいいいいい</li>
</ul>
</div>