Все вопросы

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

🗓️ Вопрос задан: 10.02.2022
💬Ответов: 2
👁️Просмотров: 3000

Есть обычный список через 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;

Добавить комментарий для Владимир Отменить ответ

CSS Головоломки в Telegram
Подписывайся и не пропускай:
Актуальные новости
Интересные задачки
Полезные подборки
Наш рейтинг
🏆Лучшие биржи ссылок
4.8
2
4.0
3.8
4
GoGetLinks
3.5
5
Miralinks
3.5
Наш рейтинг
🏆Лучший хостинг для сайта
9/10
8/10
8/10
4
8/10
8/10
7/10
7/10
Проверка знаний
🤔Хорошо ли вы знаете CSS?
Есть два блочных элемента, которые идут друг за другом в html. Какой будет оступ (margin) между ними, если задать им такие стили:

.top {
  height: 30px;
  background-color: blue;
  margin-bottom: 10px;
}
.bottom {
  height: 30px;
  background-color: red;
  margin-top: 20px;
}
    
10px
20px
30px
Peach Fuzz
🤔Цвет 2024 года
Исследовательский институт Pantone выбрал главный цвет 2024 года. Им стал нежный бархатистый персиковый оттенок, получивший название Peach Fuzz (Персиковый пух).
#febe98