箇条書きの、項目間のマージンをCSSで空ける

質問

箇条書きの項目間のマージンをCSSで空けるために

li{
margin-top:0.5em;
}

と <style>-</style> に書きました。

ふつうの箇条書き：
<ul>
<li>AAAAA</li>
<li>BBBBB</li>
</ul>
では、項目間にマージンができてくれたのですが、
画像を先頭にした箇条書きでは、だめでした。

たとえば、
<ul imagesrc="botan.gif">
<li>AAAAA</li>
<li>BBBBB</li>
</ul>
とすると、項目間のマージンがゼロです。
なぜでしょうか？良い方法はないでしょうか？

回答No.1

Bo_Bo · ベストアンサー

回答になっているか分かりませんが

リスト記号の画像指定ですが、imagesrc="xxx.gif" と言うHTMLの属性はありましたっけ？
私の認識している範囲では、HTMLでリストの記号を変更できるのは、「type=""」属性だけで、画像をリストの記号として使うにはCSSを利用しないと駄目だと思うのですが・・・
<ul imagesrc="botan.gif"> でリストの記号が画像で表示されますか。

● ULの属性
type="", class="", dir="", id="", lang="", style="", title="", compact

● CSSでリスト記号の画像指定（指定どおりの画像とマージンが適用される）
<style type="text/css"><!--
li { margin-top: 0.5em; list-style-image: url(botan.gif) }
--></style>

お礼

ありがとうございます。おかげさまで解決しました。

> <ul imagesrc="botan.gif"> でリストの記号が画像で表示されますか。

はい、されています。変なのですかね。

あと、ローカルに
<ul style="list-style-image: url('botan.gif'); margin-top: 0.tem">
としてもいいみたいですね。