Codebra
26 января 2026 в 18:55

Урок 49. Как изменить положение маркера списка

Изменяем положение маркера при помощи CSS свойством list-style-position.
📝

Внимание! На этой странице вы найдете материал урока из архивного курса по CSS. Курс был написан в 2015 и по-прежнему актуален для начинающих веб-разработчиков.

Теоретический материал сохранен в исходном виде, а практические задания с автоматической проверкой вынесены в отдельные роадмапы.

Полный список уроков доступен по тегу Архивный курс по CSS и на странице первого урока.

Маркеры списка могут обтекаться текстом в случае необходимости. Для этого существует специальное свойство list-style-position. По умолчанию маркеры находятся вне элемента. Рассмотрим синтаксис свойства list-style-position.

list-style-position: outside  | inside | inherit;

Далее пример:

li {
    list-style-position: inside;
}

Свойство list-style-position применяется к элементам dd, dt, li, ol, ul и имеющим свойство display: list-item.

📝

Переходите к следующему уроку курса, а так же не забудьте посмотреть новый материал на Codebra по тегу CSS.