web-dev-qa-db-ja.com

リスト項目間に垂直方向のスペースを設定する方法

<ul>要素内では、明らかに行間の垂直方向の間隔はline-height属性でフォーマットすることができます。

私の質問は、<ul>要素内で、リスト項目間の垂直方向の間隔をどのように設定するのですか？

htmlcsshtml-lists
91
Brice Coustillas

余白を使うことができます。例を見てください。

http://jsfiddle.net/LthgY/

li{
  margin: 10px 0;
}
97
user1633525

私はIE8をサポートしているという長所を持っていることにこれを傾けるでしょう。

li{
    margin-top: 10px;
    border:1px solid grey;
}

li:first-child {
    margin-top:0;
}

JSFiddle

31
Paulie_D

HTML

<ul>
   <li>A</li>
   <li>B</li>
   <li>C</li>
   <li>D</li>
   <li>E</li>
</ul>

CSS

li:not(:last-child) {
    margin-bottom: 5px;
}

編集：あなたが最後のli要素のために特別なケースを使用しないなら、あなたのリストはその後あなたがここで見ることができる小さな間隔を持つことになる： http://jsfiddle.net/wQYw7/

今私の解決策とそれを比較してください： http://jsfiddle.net/wQYw7/1/

確かにこれは古いブラウザでは動作しませんが、古いブラウザでこれを有効にするjs拡張を簡単に使用することができます。

30
user238801

marginをliタグに追加します。それはliの間にスペースを作ります、そしてあなたはliタグ内のテキストにスペースを設定するためにline-heightを使うことができます。

26
disinfor

疑似クラスを使用して各リストのpadding-bottomを設定することは実行可能な方法です。行の高さも使用できます。 font-family、Font-weightなどのフォントプロパティは、高さが不均等な場合に役割を果たします。

0
Rishi jung

HTML Eメールブラストを作成するときには、スタイルシートやスタイル/スタイルブロックを使用できません。すべてのCSSはインラインである必要があります。弾丸の間隔を調整したい場合は、li style = "margin-bottom：8px;"を使います。各箇条書き項目に。好みに合わせてピクセル値をカスタマイズします。

0
Malcolm Stone