Все вопросы

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

🗓️ Вопрос задан: 10.02.2022

💬Ответов: 2

👁️Просмотров: 2074

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

Ответы:

Alex

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

20 января, 2023

Ответить

Владимир

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

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

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

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

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;

10 февраля, 2022

Ответить

Отменить ответ

CSS Головоломки в Telegram

Подписывайся и не пропускай:

Актуальные новости

Интересные задачки

Полезные подборки

Перейти в Telegram

Наш рейтинг

🏆Лучший хостинг для сайта

9/10

8/10

8/10

8/10

8/10

7/10

7/10

Что читают?

🏆Популярные записи

Как сделать гамбургер (бургер) меню — готовый код и подробное объяснение

Как сделать плавное увеличение картинки при наведении — эффект на чистом CSS

Появление элементов при скролле

Как выровнять картинку по центру с помощью CSS

Как изменить цвет SVG в CSS

Проверка знаний

🤔Хорошо ли вы знаете CSS?

Есть два блочных элемента, которые идут друг за другом в html. Какой будет оступ (margin) между ними, если задать им такие стили:


.top {
  height: 30px;
  background-color: blue;
  margin-bottom: 10px;
}
.bottom {
  height: 30px;
  background-color: red;
  margin-top: 20px;
}

10px

20px

30px

Viva Magenta

🤔Цвет 2023 года

Исследовательский институт Pantone выбрал главный цвет 2023 года. Им стал карминово-красный оттенок с фиолетовым подтоном, который назвали Viva Magenta.

#bb2649