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

Вопрос задан: 30.07.2022
Ответов: 2
Просмотров: 3959

Есть обычный список через li. Задаю им отступ margin. Но проблема в том, что у самого списка (тег ul) тоже есть свои отступы. И получается, что у блока снизу отступ больше, чем вверху. Как сделать так, чтобы последний элемент в списке не добавлял свой отступ? Буду благодарен за ответ.

Ответы:

Alex

li:not(:last-of-type) {
margin-bottom: 1em;
}

Владимир

К примеру, есть список:

Один
Два
Три
Четыре

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

Стандартный вариант:

li {
margin-bottom: 1em;
}

li:last-child {
margin-bottom: 0;
}

То, как я обычно использую:

li:not(:last-child) {
margin-bottom: 1em;
}

Еще есть такой способ:

li + li {
margin-top: 1em;
}

Еще можно пофантазировать и добавить определенный класс последнему элементу и задать ему margin-bottom: 0;