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

Question

У меня есть очень простой неупорядоченный список HTML:

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

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

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

Answer 1

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

Answer 2

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

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

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

Answer 3

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

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

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

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

Answer 4

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

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

Answer 5

Границы свойств и отступы являются правильным подходом.

Я хочу добавить совет, чтобы сбросить ваш полный CSS с помощью предопределенного файла reset-css, например, Эрика Мейера: Ссылка

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

Answer 6

Уменьшите top-margin, bottom-margin и заполнение элемента <li> следующим образом:

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

Answer 7

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

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

Answer 8

Я столкнулся с этой проблемой

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

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

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

li { 
display: inline-block;
}

Произошел пробел, однако:

li { 
display: block;
}

нет.