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

Как убрать отступ слева перед HOME ( padding ) у списка ul li, который выстроен горизонтально?

Как убрать отступ слева перед HOME ( padding ) у списка ul li , который выстроен горизонтально?

• Вопрос задан более трёх лет назад
• 414 просмотров

1 комментарий

Простой 1 комментарий

так там нет отступа же
Решения вопроса 0
Ответы на вопрос 1
Как раз таки этот код у вас работает.

&:first-child

&:last-child

нет.
Все потому что у последнего элемента нет паддинга справа. Вы задали фиксированную ширину его родителю и обертке. Хотите его убрать, уменьшите ширину или добавьте

.list

если хотите растянуть содержимое на всю ширину
Ответ написан более трёх лет назад
Комментировать
Нравится Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

• JavaScript
• +1 ещё

Почему popup окно открывается только со второго нажатия?

• 1 подписчик
• 2 часа назад
• 22 просмотра

Как работает margin. Правила внешних отступов

Любой элемент на странице сайта представляет собой прямоугольный блок, который имеет ширину и высоту, у него могут быть внутренние и внешние отступы и границы. Это и есть блочная модель — box model.

Внешние отступы margin определяют расстояние между элементом и его окружением. Указывают отступы в пикселях ( px ), условных единицах ( em ), процентах ( % ) по отношению к ширине родительского блока или задают значение auto . Благодаря margin блоки не слипаются и располагаются на отведённом для них по макету месте.

Особенности отступов блочных элементов

У любой HTML-страницы есть базовое оформление, даже если вы ещё не подключили стили. Например, если вы создадите простой текстовый документ, то увидите, что заголовки имеют определённый размер, ссылки оформляются подчёркиванием и синим цветом, элементы имеют отступы. За это оформление отвечают браузерные стили, которые определяют создатели браузеров, например, Safari, Firefox. Поэтому в разных браузерах стили могут различаться, что может отразиться на вёрстке. Важно учитывать это и тестировать сайт в разных браузерах.

Списки, параграфы, заголовки и цитаты имеют внешние отступы. По умолчанию установлены верхние и нижние отступы — margin-top и margin-bottom .

Встроенные отступы установлены, чтобы текст был читаемый и строки не слипались. Но часто отступы накладываются друг на друга или схлопываются, из-за этого элементы начинают смещаться. Чтобы отступы не мешали в расчётах, их рекомендуется обнулять.

Правила внешних отступов

Схлопывание

��️ margin collapsing — это схлопывание внешних отступов. Такое поведение наблюдается только у вертикальных внешних отступов.

�� Когда вертикальные отступы двух блочных элементов соприкасаются, они не складываются, а накладываются друг на друга, образуя общее пространство, равное большему из отступов.

❌ Вертикальные отступы не схлопываются между элементами с position: absolute .

А также, если у родительского элемента указано свойство display: grid или display: flex , то отступы дочерних элементов не схлопнутся.

Правило, которое поможет избежать схлопывания:

⭐ Задавайте элементам только нижний отступ — margin-bottom .

У каждого сайта есть направление — поток — это последовательность вывода элементов на страницу. Поток всегда идёт сверху вниз, поэтому логично выставлять отступы по его направлению. В этом случае у элемента есть нижний отступ, которым он примыкает к следующему элементу без верхнего отступа. Таким образом отступы не схлопываются, и мы можем точно рассчитать расстояние между элементами.

Выпадение отступов

Бывают случаи, когда отступы не схлопываются, а выпадают из контейнера. Если задать родительскому элементу нулевые отступы, то внешние отступы его первого и последнего дочерних элементов выйдут за границу контейнера, что может нарушить вёрстку.

✅ Чтобы вертикальные отступы дочерних элементов не выпадали и не мешали расчётам при вёрстке рекомендуется:

• всегда обнулять верхние отступы — margin-top: 0;
• обнулять нижний отступ margin-bottom у последнего дочернего элемента

.item:last-child

Вставка изображений

Если вы добавляете изображение на страницу с помощью тега , то не забывайте, что по спецификации элемент имеет свойство display со значением inline . Поэтому изображение выравнивается по базовой линии и под ним появляется небольшое пространство, предназначенное для выносных элементов букв.

Чтобы убрать пространство под изображением, нужно сменить тип отображения на block .

.mountains

⭐ Шпаргалка по правилам:

1. Сбрасывайте браузерные стили по умолчанию.
2. Задавайте текстовым элементам нижний отступ margin-bottom .
3. Сбрасывайте вертикальные отступы последнего дочернего элемента.
4. Изображениям, добавленным с помощью тега , меняйте тип отображения на block .

Материалы по теме

• Чем отличаются margin и padding
• Как изменить ширину элемента. Свойство width
• Когда в вёрстке нужна высота. CSS-свойство height

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Читать дальше

Новое в 2023 — text-wrap: balance

В 2023 в CSS появилось любопытное свойство text-wrap со значением balance . Оно «уравновешивает» текстовые элементы, чтобы они приятнее выравнивались внутри блока.

Ограничение — текст не длиннее 6 строк, иначе браузеру придётся непросто, и лучше не применять это свойство к body .

Вот пример заголовка c text-wrap: balance и без него.

На момент написания заметки свойство поддерживается во всех больших браузерах, кроме Safari, а на мобильных — только в Chrome, но то ли ещё будет.

• 13 ноября 2023

Знакомство с CSS

После того как мы разобрались с базовой структурой веб-страницы с помощью HTML, пришло время привнести в неё стиль и красоту. В этом нам поможет CSS, что означает Cascading Style Sheets, или «каскадные таблицы стилей».

CSS используется для оформления HTML-страниц. Если HTML — это скелет сайта, то CSS — его одежда. С помощью CSS мы можем задавать цвета, шрифты, отступы, добавлять анимации и многое другое.

• 1 ноября 2023

Увеличение ссылки при наведении

Задача: плавно увеличить ссылку при наведении.

Решение:

a < display: inline-block; transition: transform 0.3s ease; >a:hover

Первые два свойства просто немного меняют вид ссылки. Свойство color: maroon; меняет цвет текста в тегах на темно-красный, а свойство text-decoration : none; убирает подчеркивание.

Но наша задача — плавно увеличить размер ссылки, а не просто её перекрасить. Поэтому используем свойство transform: scale(1.2) , которое срабатывает при наведении курсора и увеличивает размер ссылки в 1.2 раза по сравнению с её начальным размером.

• 13 октября 2023

WOFF больше не нужен

Я купил и скачал шрифты для недавнего проекта, распаковал папку, где были только WOFF2-файлы, и сначала не поверил, что такое бывает.

Потом мне стало интересно: они что, забыли WOFF? А он вообще ещё нужен? Ну, всё-таки, веб — это место, где постоянно всё меняется и улучшается, поэтому я пошёл и спросил людей в Mastodon. Ответ был единодушным: нужен только WOFF2!

Я хорошо помню пост от Зака в конце 2016, после которого я отказался от исчерпывающего синтаксиса @font-face , включавшего, вдобавок, TTF, EOT и SVG-шрифты, и перешёл только на WOFF2 и WOFF.

Похоже, с тех пор мир веб-шрифтов изменился ещё разок, и вот актуальная версия @font-face :

@font-face

Остался всего один формат. Просто, скажите?

Как писал Зак, «так как в вебе, когда шрифт не найден, всё равно подгружаются системные шрифты, мы можем идти в ногу со временем». Итак, какие браузеры отправятся в тёмные века системных шрифтов с этим синтаксисом?

• IE 11, 10, 9, 8, 7, …
• Chrome 4–35
• Edge 12 и 13
• Safari 3–9.1
• Firefox 2–38
• Opera 22 и ниже
• Android 4.4.4 KitKat и ниже (а это
• Safari на iOS 3.2–9.3

Caniuse.com показывает, что почти у 95% пользователей есть браузер с поддержкой WOFF2. А в относительной статистике (Date Relative — прим. перев.) заметно, что массовый переход на WOFF2 случился в 2015 и 2016. К концу 2016 во всех последних версиях больших браузеров появилась поддержка WOFF2.3

А спустя 7 лет поддержка расширилась настолько, что можно уже не добавлять в проект WOFF-файлы — ну, кроме случая, когда вы точно знаете, что много ваших пользователей используют старые устройства и браузеры.

С другой стороны, нет смысла и удалять WOFF из старых проектов. Если вы подключали WOFF2 раньше WOFF внутри @font-face — и порядок здесь важен — то браузер просто скачает и подключит WOFF2-версию.

И если однажды вы, как и я, обнаружите себя перед папкой, полной файлов WOFF2, знайте, что WOFF — уже всё.

• 23 сентября 2023

Трясём пароль с помощью CSS

Знаете момент, когда всё на сайте уже сделано, и хочется добавить какую-нибудь маленькую незаметную фишку? Мы тоже знаем, поэтому давайте просто потрясём поле пароля, когда пользователь ввёл неверный пароль. Как на Маке.

Вот что получится в итоге:

• 7 сентября 2023

Как сделать тёмную тему на сайте

Без лишних слов создадим простой переключатель для светлой и темной темы с использованием HTML, CSS и JavaScript. Нам понадобятся три файла — index.html , styles.css и script.js .

HTML

Основная разметка страницы — заголовок, абзац текста, список и текст в рамке.

CSS (styles.css):

Здесь задаём цвета для светлой и тёмной темы, а ещё минимальную стилизацию текста и блока с рамкой.

body < font-family: Arial, sans-serif; transition: background-color 0.3s ease; >body.light-theme < background-color: #ffffff; color: #000000; >body.dark-theme < background-color: #121212; color: #ffffff; >.boxed-text

JavaScript (script.js)

Этот код нужен, чтобы переключать тему при нажатии на кнопку:

document.getElementById('themeToggle').addEventListener('click', function() < const currentTheme = document.body.className; if (currentTheme === 'light-theme') < document.body.className = 'dark-theme'; >else < document.body.className = 'light-theme'; >>); 

При загрузке страницы по умолчанию будет установлена светлая тема. При нажатии на кнопку «Переключить тему» будет происходить переключение между светлой и темной темой.

• 29 августа 2023

4 способа центрировать текст в CSS

Центрирование элементов на веб-странице — это одна из наиболее распространенных задач, с которой мы сталкиваемся при работе с макетами. И хотя центрирование текста по горизонтали довольно простое ( text-align: center; и делов-то), вертикальное центрирование может быть немного сложнее. Давайте рассмотрим несколько методов.

Метод 1: Flexbox

Flexbox — это один из самых простых и эффективных способов центрирования.

Заворачиваем текст в с классом center-both :

 
Центрированный текст
 
 

.center-both

Метод 2: CSS Grid

HTML такой же, как в предыдущем примере. В CSS включаем гриды и используем свойство place-items со значением center :

.center-both

Метод 3: позиционирование и Transform

Этот метод немного старомодный и работает не идеально. Здесь у div устанавливается relative позиция. А

внутри дива мы сдвигаем с помощью абсолютного позиционирования. Не слишком элегантно:

.center-both < position: relative; >.center-both p

HTML остается таким же. Вот что получается:

Плохой метод: использование line-height

Если у вас однострочный текст, вы можете установить line-height , равный высоте родительского элемента.

.center-both < line-height: 200px; /* Пример высоты */ text-align: center; >

Этот метод не подойдет для многострочного текста. Да и вообще мы очень не рекомендуем так делать, это прям совсем для любителей острых ощущений. Потому что вот:

Если вам интересно узнать больше о каждом из этих методов, рекомендуем посмотреть документацию по Flexbox на MDN или документацию по CSS Grid на MDN, а ещё пройти курсы в HTML Academy.

• 28 августа 2023

Как скруглить рамку. CSS-свойство border-radius

CSS-свойство border-radius помогает скруглить углы элемента. Оно особенно полезно для стилизации кнопок, форм, карточек товаров и других элементов сайта.

• 28 июля 2023

CSS-свойство contain

Представьте, что у вас есть контейнер. Внутри него находятся разные элементы: текст, изображения или что-то другое. Свойство contain говорит браузеру, как именно элементы должны взаимодействовать. Например, они могут быть ограничены, влиять на расположение друг друга или менять свои размеры.

Также свойство помогает повысить производительность страницы. Например, браузер понимает, когда при изменении свойств элемента нужно перерисовать страницу, а когда нет.

⭐ CSS-свойство contain определяет, как элемент должен взаимодействовать с другими элементами внутри контейнера.

Синтаксис

.container

• 14 июля 2023

Как задать позицию и размер элемента. CSS-свойство inset

CSS-свойство inset задаёт позицию и размер элемента на странице. Это комбинация четырёх отдельных свойств: top , right , bottom и left , которые определяют отступы от верхнего, правого, нижнего и левого края элемента.

Синтаксис

.element

• 13 июля 2023

Отступ после последнего li в ul. Как убрать? [дубликат]

Проблема в ширине ul. Откуда берется отступ после последнего li в ul? Все padding и margin справа на нуле. Как можно убрать?

Отслеживать
задан 17 мая 2019 в 10:48
RedLionHeart RedLionHeart
73 1 1 серебряный знак 7 7 бронзовых знаков
Надо пример кода, желательно на jsfiddle или чем-то подобном.
17 мая 2019 в 12:19

3 ответа 3

Сортировка: Сброс на вариант по умолчанию

Если нужна выборка именно последнего элемента вы можете воспользоваться псевдоклассом last-child

:last-child < // тут ваши стили >

Так же советую вам почитать про выборку с помощью псевдокласса nth-child()

Подробнее про last-chiild

В целом про псевдоклассы

Отслеживать
ответ дан 17 мая 2019 в 14:35
user298256 user298256
тут скорее вопрос про сам ul, нежели про последний li
17 мая 2019 в 15:20

Не совсем понятно о каком отступе после последнего li идет речь, т.к. на скрине показан лишь весь список целиком. Если речь идет об этом пустом пространстве:

То с чего вы взяли, что это отступ? У вас указана фиксированная ширина для списка в 62.5% и это, вполне возможно, просто пустое пространство, не заполненное элементами списка, которые, скорее всего (судя по скрину) так же сделаны через float:left . Чтобы дать более точный ответ на вопрос нужно смотреть на стили самих li и родительского элемента в котором лежит ul . Если задача стоит в распределении всех элементов li равномерно по всей ширине ul то можете использовать следующие стили для вашего элемента ul :

.main-nav

А если задача укоротить сам ul то просто сделайте ему меньшую ширину.

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

Отрицаем всё! Исключаем из выборки селектора элементы с определённым признаком.

Время чтения: меньше 5 мин

Открыть/закрыть навигацию по статье
Контрибьюторы:

Обновлено 18 июля 2022

Кратко

Скопировать ссылку «Кратко» Скопировано

Очень полезный псевдокласс, который поможет вам неплохо так сэкономить строчки кода. Суть работы этого парня — отсечь все элементы, не подходящие под условие. Звучит сложнее, чем выглядит.

Пример

Скопировать ссылку «Пример» Скопировано

Как вы наверняка уже знаете, между элементами принято задавать отступы так, чтобы у последнего или первого не было лишних отступов, чтобы они не торчали без дела и не меняли размеры родителя без причины.

Например, есть задача задать нижний отступ всем пунктам списка, кроме последнего:

Задаём нижние отступы всем пунктам списка:

 li  margin-bottom: 1em;> li  margin-bottom: 1em; >    Скопировать Скопировано Не удалось скопировать   

Сбрасываем нижний отступ у последнего пункта списка, чтобы не висел:

 li:last-child  margin-bottom: 0;> li:last-child  margin-bottom: 0; >    Скопировать Скопировано Не удалось скопировать   

Для самого простого решения этой задачи нам потребовалось 2 блока кода. Но, скорее всего, в вашем проекте нужно будет сбросить лишние отступы не только для этого элемента. Точно можно как-то проще.

Конечно можно! Сократим два блока кода до одного, используя псевдокласс :not . Выберем все пункты списка, кроме последнего, и зададим им нижние отступы:

 li:not(:last-child)  margin-bottom: 1em;> li:not(:last-child)  margin-bottom: 1em; >    Скопировать Скопировано Не удалось скопировать   

Вуаля! Красиво, аккуратно, а главное, работает ровно как задумывалось ��

Как пишется

Скопировать ссылку «Как пишется» Скопировано

Берём любой селектор, ставим двоеточие и пишем ключевое слово not . После него ставим круглые скобки и внутри них указываем селектор, который должен быть исключён из выборки. Селектор в скобках может быть любым, главное чтобы он не включал псевдоэлементы. В скобках можно указать и несколько селекторов, перечисленных через запятую. В таком случае будут исключаться элементы подходящие под любой из перечисленных селекторов.

Ещё можно выбирать внутри body любой элемент, не являющийся, например, абзацем: body : not ( p ) . По аналогии можете выбирать любой элемент внутри определённого родителя, но не подходящий под условие.

Как понять

Скопировать ссылку «Как понять» Скопировано

Можно сказать заумно, что :not ( Х ) это функция, которая принимает в качестве аргумента селектор Х и находит в разметке элементы, не соответствующие этому самому элементу Х.

А можно проще: мы командуем браузеру «Выбери все элементы подходящие к селектору до :not и исключи из выборки все элементы, подходящие под селектор в круглых скобках».

Подсказки

Скопировать ссылку «Подсказки» Скопировано

�� Слева от :not необязательно должен быть селектор. Можно написать :not ( . hidden ) , и браузер выберет вообще все элементы на странице, кроме тех, у которых есть класс .hidden .

�� Если очень захотеть — можно в космос полететь написать бесполезный селектор: :not ( * ) . Такой селектор выберет любой элемент, который не является любым элементом ��‍♀️

�� Нельзя вкладывать один :not в другой.

�� Можно выстраивать цепочки из :not . Тогда выборка будет уменьшаться по порядку исключая элементы, подходящие под условия.

Красим в красный все пункты списка, кроме последнего элемента и кроме тех, у которых есть класс .active :

 li:not(:last-child):not(.active)  color: red;> li:not(:last-child):not(.active)  color: red; >    Скопировать Скопировано Не удалось скопировать   

На практике

Скопировать ссылку «На практике» Скопировано

Алёна Батицкая советует

Скопировать ссылку «Алёна Батицкая советует» Скопировано

�� После того, как поддержка этого псевдокласса была внедрена во все браузеры, я стала использовать его повсеместно. Гораздо удобнее написать один селектор, чем два блока кода для такой тривиальной задачи, как сброс последнего отступа или выбор элемента за исключением какого-то класса.

Из последнего: мне нужно было стилизовать все поля ввода, кроме тех, что были скрыты (иногда в форму добавляют скрытые поля, чтобы отправить вместе с данными пользователя служебные данные). Вместо того, чтобы писать составной селектор, выбирая отдельные поля или выдумывать отдельный класс только для тех полей, которые видны или не видны, я написала селектор input : not ( [ hidden = «true» ] ) , и интерпретатор применил нужные мне стили только к тем инпутам, у которых нет атрибута hidden .