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

У меня очень простой неуправляемый список html:

<ul>
<li>First</li>
<li>Second</li>
</ul>

Проблема заключается в том, что стилизация по умолчанию для такого списка в firefox оставляет много места между каждым элементом списка - примерно так же, как между абзацами в теге <p>. Мой google-fu сегодня нехарактерно бесполезен - как уменьшить это вертикальное пространство? Я предполагаю, что есть элемент css, который я могу применить к тегу <ul>, но я не могу найти ничего.

(Это происходит в боковом навигационном элементе страницы, поэтому он должен быть как можно более компактным).

Ответ 1

В дополнение ко всем другим ответам, возможно, стоит установить line-height: 1em;, чтобы уменьшить ведущее пространство каждой строки. Конечно, padding-top, padding-bottom, margin-top и margin-bottom являются наиболее вероятными виновниками.

Ответ 2

Уменьшить или удалить верхнее и нижнее поля и прокладки. Например:

li {
    margin: 0;
    padding: 0.2em;
}

PS: Поскольку вы используете Firefox, попробуйте Firebug. Когда вы нажимаете на элементы в дереве HTML в Firebug, он выделяет элемент на самой странице. Он окрашивает содержимое, маржу и дополнение отдельно, чтобы вы могли точно видеть, как поля и прокладки влияют на ваш макет.

Ответ 3

Задайте свойства CSS margin и padding для любых размеров. Для максимальной компактности используйте:

ul, li { margin: 0; padding: 0; }

Ответ 4

Никто из них не работал у меня.

У меня был несортированный список с фиксированной высотой и шириной, который должен был быть точно суммой элементов списка с его paddings и/или полями. Фактически 9 элементов списка, которые должны были быть помещены в квадрат 3 x 3.

Что сработало для меня, это поставить

li{
    height: 144px;
    width: 144px;
    float: left;
}

Ответ 5

Уменьшите top-margin, bottom-margin и добавьте элемент <li> как таковой:

li { margin: 1em 3em; padding: 0.2em; }

Ответ 6

Поля свойств и отступы - правильный подход.

Я хочу добавить совет к reset вашему полному css с предопределенным reset -css файлом, подобным этому Eric Meyer: Ссылка

После этого у вас есть возможность контролировать свои стили более подробно.

Ответ 7

Я испытал эту проблему

Firebug. Когда вы нажимаете на элементы в дереве HTML в Firebug, это выделит элемент на самой странице. Он окрашивает содержимое, маржу и дополнение > отдельно, чтобы вы могли точно видеть, как поля и paddings влияют на ваш макет.

Firebug не показывал отступов и полей.

Когда я изменил свойство отображения, пробел исчез.

li { 
display: inline-block;
}

Произведен разрыв, однако:

li { 
display: block;
}

нет.

Ответ 8

ul {
    font-size: 0;
}
ul li {
    display: inline;
    font-size: 16px;
}

Всегда работает!