Как установить вертикальное пространство между элементами списка?

Question

Внутри элемента <ul> ясно, что вертикальное расстояние между строками может быть отформатировано атрибутом line-height.

Мой вопрос в том, что в элементе <ul>, как установить вертикальное расстояние между элементами списка?

Answer 1

Добавить margin в ваши li теги. Это создаст пространство между li, и вы можете использовать line-height для установки интервала текста в тегах li.

Answer 2

Вы можете использовать запас. Смотрите пример:

http://jsfiddle.net/LthgY/

li{ 
    margin: 10px 0; 
} 

Answer 3

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; 
} 

EDIT: Если вы не используете специальный случай для последнего элемента LI ваш После этого список будет иметь небольшой интервал, который вы можете увидеть здесь: http://jsfiddle.net/wQYw7/

Теперь сравните это с моим решением: http://jsfiddle.net/wQYw7/1/

уверен, что это не работает в старых браузерах, но вы можете легко использовать JS расширения, которые позволят это для старых браузеров.

Answer 4

Я был бы склонен к тому, что имеет силу поддержки IE8.

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

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

JSFiddle

Answer 5

<br> между <li></li> записей строки, кажется, работает отлично во всех браузерах, которые я пробовал, но он не может пройти он-лайн W3C CSS3 проверки. Это дает мне точно расстояние между строками, которым я занимаюсь. Насколько мне известно, поскольку он, несомненно, работает, я продолжаю использовать его, независимо от того, что W3C говорит, до тех пор, пока кто-то не сможет найти хорошую юридическую альтернативу.