行間の調整方法を教えてください

質問

ブログのテンプレートをカスタマイズしてる中で、やり方が分からないところが出てきました。

<ul style="line-height:200%;">
<li>あああああああああああああああああ</li>
<li>かかかかかかかかかかかかかかかかかかかかかかかかかかか</li>
<li>さささささささ</li>
</ul>

上記 ｈｔｍｌ は下図のように表示されます。リストが途中で折り返されるのは幅が広くとっていないからです。なお、数字は説明の便宜で付けています。

図で行間が均一になっています。

リストの間を、つまり、

「2と3の間の行間」、「5と6の間の行間」をもう少し広くしたいと思います。

その方法を教えてください。

回答No.1

megane3333 · ベストアンサー

<ul style="line-height:200%;">
<li style="margin-bottom:1em;">あああああああああああああああああ</li>
<li style="margin-bottom:1em;">かかかかかかかかかかかかかかかかかかかかかかかかかかか</li>
<li style="margin-bottom:0;">さささささささ</li>
</ul>

こんな感じでどうでしょう。

お礼

早速に回答ありがとうございました。

#side ul{
　　　　　line-height:150%;
}

#side li{
margin-bottom:1em;
}

としてみたところ、見栄えがよくなりました。