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

14

Для изменения расстояния между маркером списка и текстом используйте свойство 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.

Источник