Как сделать отступ в списке в html

Маркированный список

Как сделать, чтобы цвет маркеров в списке отличался от цвета текста?

Как убрать маркеры в маркированном списке?

Для этой цели применяется стилевое свойство list-style-type со значением none . Его следует добавить к селектору UL или LI .

Как вместо символа маркера использовать картинку?

Чтобы задать свой рисунок маркера, воспользуйтесь стилевым свойством list-style-image , в качестве значения которого указывается url , а в скобках — путь к желаемому изображению.

Хочу изменить вид маркера на другой символ. Как это сделать?

С помощью HTML или CSS допускается устанавливать один из трех типов маркеров: disc (точка), circle (кружок), square (квадрат). Добавлять эти значения нужно к стилевому свойству list-style-type , которое указывается для селектора UL или LI .

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

Для изменения расстояния между маркером списка и текстом используйте свойство padding-left для селектора LI .

Как изменить отступ слева от маркеров списка?

Добавьте свойство margin-left к селектору UL или OL , соответственно, для маркированного или нумерованного списка. Браузер Firefox, Safari и Chrome одновременно с отступами добавляет к списку поля (свойство padding ), поэтому для одинакового отображения списка в разных браузерах необходимо обнулить значение padding .

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.

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

Есть список, там нужно увеличить расстояние от маркера до пункта. Не могу понять, как это сделать. По дефолту list-style-position: outside и я всегда увеличивал расстояние через padding . Но здесь принципиально важно сделать list-style-position: inside . padding тогда не работает. Не могу понять, как сделать это Упрощённый кусок кода:

Отслеживать
1,765 2 2 золотых знака 5 5 серебряных знаков 17 17 бронзовых знаков
задан 26 янв 2023 в 6:27
Dark Space Dark Space
1,328 3 3 серебряных знака 21 21 бронзовый знак

Уберите стандартный маркер. А пунктам сделайте псевдоэлементы. Толкаете пункты пэддингом сколько нужно, а маркеры-псевдоэлементы ставите через left

26 янв 2023 в 6:31

1 ответ 1

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

Вот как бы это реализовал я:

li < background-color: pink; list-style-position: inside; list-style: none; position: relative; --marker-size: 5px; --gap-right: 5px; --gap-left: 5px; padding-left: calc(var(--marker-size) * 2 + var(--gap-right) + var(--gap-left)); >li::before < content: ''; width: var(--marker-size); height: var(--marker-size); background-color: rgb(0, 0, 0); display: inline-block; border-radius: 50%; position: absolute; top: calc(50% - calc(var(--marker-size) / 2)); left: calc(var(--marker-size) / 2 + var(--gap-left)); >

Как поменять размер маркера?

За это отвечает пропорция —marker-size , там вы указываете размер маркера, а уже сами стили правильно располагают его.

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

Чтобы регулировать расстояние между маркером и пунктом нужно изменять пропорцию —gap-right , она отвечает за расстояние которое добавляется с правой стороны.

Чтобы отрегулировать расстояние слева, меняйте пропорцию —gap-left , она отвечает за расстояние которое добавляется с левой стороны.

Как задать расстояние между пунктами списка?

Расстояние между пунктами списка

Второй способ следующий — для селектора li добавляем свойство line-height, значение в виде дробного числа подбираем самостоятельно. В примере 2 используется значение 1.8.

Пример 2. Использование line-height

создание пунктуальности (никогда не будете никуда опаздывать);
излечение от пунктуальности (никогда никуда не будете торопиться);
изменение восприятия времени и часов.

Этот способ менее универсален, поскольку line-height воздействует на все строки. Вид списка зависит от переносов строк; если переносов нет, то мы получим результат, показанный на рис. 2. Если в тексте имеются переносы, то получим результат как на рис. 3.

Межстрочное расстояние

Рис. 2. Межстрочное расстояние

Межстрочное расстояние при переносе строк

Рис. 3. Межстрочное расстояние при переносе строк

См. также

line-height
line-height в CSS
margin-bottom
Атрибут bottommargin

Как убрать отступ сверху и снизу от списка?

Убрать отступы вокруг маркированного или нумерованного списка.

Решение

Используйте стилевое свойство margin и padding с нулевым значением для селектора UL или OL , в зависимости от типа списка, как показано в примере 1.

Пример 1. Отступы в списке

HTML5 CSS 2.1 IE Cr Op Sa Fx

Результат данного примера показан на рис. 1.

Список без вертикальных и горизонтальных отступов

Рис. 1. Список без вертикальных и горизонтальных отступов

Обратите внимание, что исчезают маркеры списка, которые оказываются за левым краем веб-страницы. Чтобы убрать только верхний и нижний отступ, не сдвигая при этом список влево, используйте свойства margin-top и margin-bottom (пример 2).

Пример 2. Отступы в списке