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

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

Пример 1. Расстояние от маркера до текста

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Расстояние между маркером и текстом</title> <style> li { padding-left: 20px; /* Расстояние от маркера до текста */ } </style> </head> <body> <hr> <ul> <li>Чебурашка</li> <li>Крокодил Гена</li> <li>Шапокляк</li> </ul> <hr> </body> </html>

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

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

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

Отрицательное значение для padding-left использовать нельзя, поэтому минимальное задаваемое расстояние равно нулю. Но даже в этом случае небольшой исходный промежуток между маркером и текстом останется.

Указанное решение не работает, если для списка (селектора ul или ol) задано свойство list-style-position со значением inside.

Автор и редакторы

Автор: Влад Мержевич
Последнее изменение: 18.09.2018
Редакторы: Влад Мержевич
Как научиться разрабатывать сайты