リストの行頭に画像を使う方法について

質問

こんにちは。nekotoraと申します。
CSSを使用して、リストの行頭に画像を表示させる方法を２つ試しました。
以下、スタイルシートの部分です。

ul.kajo {list-style-image:url(images/list04.gif);
vertical-align:middle;}

li.ban {list-style-type:none;
padding-left:22px;
background-image: url(images/list04.gif);
background-repeat: no-repeat;}

前者の結果は、画像と文字の距離を変更することが
できないようです。
後者の結果は、画像と文字の距離を変更できますが、
左側にマージンを設定したように引っ込んでしまい
ます。
前者のように表示して、画像と文字の距離を変更
することは可能でしょうか？
どうぞよろしくお願い申し上げます。

回答No.1

rody555

こんなのはいかがでしょう？

ul {
margin-left: 18px;
padding-left: 0px;
list-style: none;
}
li {
padding-left: 15px;
background: url(images/list04.gif) no-repeat 0 0.25em;
}

ulのmarginでリスト自体の位置を変えられます。
liのpaddingでリストマークと文字の間隔を調節してください。
リストマークの縦位置の調節は最後の0.25emの数値を変えていじってみてください。

お礼

rody555さん、こんにちは。
コメントありがとうございました。
結局、下記のように落ち着きました。
今回使用の画像が、文字に大体合っている大きさ
だったのでラッキーでした。
でも0.25emの値を変更する方法は勉強になりました。
ありがとうございました。
margin-leftを使うことができたのですね。
自分が試したときは、どうしても動かなくて
cssの中で泥沼化しておりました。
ありがとうございました。

ul {margin-left:20px}

li {list-style-type:none;
padding-left:22px;
background-image: url(images/list04.gif);
background-repeat: no-repeat;
}