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

Отступы в списке

Свойства margin и padding устанавливают внешние и внутренние отступы для элемента. Например:

См. также

margin
margin в CSS
padding
Абсолютное позиционирование
Блочные элементы
Выравнивание с помощью флексбоксов
Колесо для сокращённых свойств
Отзывчивый веб-дизайн
Открываем блочную модель
Свойства текста в CSS
Свойство margin
Строчные элементы
Схлопывающиеся margin

Темы практики

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

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

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

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

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

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

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

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

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

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

См. также

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

Отступ для списка

Author24 — интернет-сервис помощи студентам

Подскажите пожалуйста, как можно прописать нижний внешний отступ для списка (с двух пунктов), если нет второго пункта, если он есть, то отступ не должен отображаться.

94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
Ответы с готовыми решениями:

Задать отступ для выпадающего списка
Добрый день. Есть меню вида, выводится он массивом PHP. Скажите могу ли я каким нибудь образом.

Как сделать отступ для маркированного списка?
Хоть у меня и стоит ВордПресс, то все равно решил сюда написать. В общем такая проблема, что.

Отступ списка от рисунка слева
Проблема заключается в том, что когда вставляется картинка пропадает отступ списков, т.е. вот.

Вёрстка списка товаров, убрать отступ сверху и по краям
Как осуществить правильно вёрстку списка товаров чтобы не было отступов которые отметил красным, по.

333 / 309 / 168
Регистрация: 02.06.2014
Сообщений: 1,130
Попробуйте вот так.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38

 html lang="en"> head> meta charset="UTF-8"> title>Document/title> style> * < margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; list-style-type: none; >ul < padding: 10px; margin: 10px; border: 1px solid #ccc; >li < margin-bottom: 20px; >li:last-child < margin-bottom: 0; font-weight: bold; >/style> /head> body> ul> li>Первый/li> li>Второй/li> /ul> /body> /html>

Регистрация: 27.03.2013
Сообщений: 84

из-за того что для li прописан background, отступ увеличивает размер li (прикрепил скриншот).

Может быть универсальней было бы сделать верхний отступ для блока, который идет после списка? (если нет пунктов 2,3, то отступ прописывается, если есть, то нет)

1 2 3 4 5 6 7 8 9 10 11

aside> div> ul> li>пункт 1/li> li>пункт 2/li> li>пункт 3/li> /ul> /div> /aside> div>p>Текст/p>/div>

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

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

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

Для этой цели применяется стилевое свойство 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, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.