Свойство CSS list-style-position
Свойство CSS list-style-position задаёт положение маркера списка — внутри или снаружи блока элемента. Значения, примеры, использование.
Свойство list-style-position управляет тем, находится ли маркер элемента списка (точка или номер) внутри или снаружи блока элемента списка. Это небольшая, но заметная деталь: она определяет, выравнивается ли перенесённый текст длинного элемента списка под маркером или под первой строкой текста.
На этой странице описаны оба значения, влияние выбора на отступ и перенос текста, связь свойства с сокращённым list-style, а также ситуации, когда применяется каждое из значений.
Область применения
list-style-position работает для любого элемента, у которого display равно list-item. По умолчанию это элементы <li>. Поскольку свойство наследуется, его обычно задают один раз для родительского списка — <ul> или <ol> — и все дочерние элементы наследуют его.
| Начальное значение | outside |
|---|---|
| Применяется к | Элементам списка. |
| Наследуется | Да. |
| Анимируемое | Нет. |
| Версия | CSS1 |
| Синтаксис DOM | object.style.listStylePosition = "inside"; |
Синтаксис
list-style-position: inside | outside | initial | inherit;Примеры
Пример со значением "inside"
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.inside {
list-style-position: inside;
}
li {
border: 1px solid #666;
padding: 5px;
}
</style>
</head>
<body>
<h2>List-style-position property example</h2>
<p>Here the list-style is positioned "inside".</p>
<ul class="inside">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
</body>
</html>Результат
![Свойство CSS list-style-position](https://api.w3docs.com/uploads/media/default/0001/03/f9df27bcea2db32f3bb0f4290142c7eea8e2ff47.png "CSS list-style-position inside example" =420x)
При значении inside маркер становится частью содержимого элемента. Он располагается внутри блока, поэтому граница каждого <li> охватывает и маркер, а текст, перенесённый на вторую строку, выравнивается под маркером, а не под первой строкой текста.
Пример со значением "outside"
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.outside {
list-style-position: outside;
}
li {
border: 1px solid #666;
padding: 5px;
margin-bottom: 15px;
}
</style>
</head>
<body>
<h2>List-style-position property example</h2>
<p>Here the list-style is positioned "outside".</p>
<ul class="outside">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
</body>
</html>При значении outside (по умолчанию) маркер выносится в область слева от блока. Граница теперь охватывает только текст, а перенесённые строки выравниваются по первой строке текста, а не по маркеру — привычный вид большинства списков в интернете.
Выбор значения
outside— стандартный выбор. Перенесённый текст остаётся аккуратно выровненным, что удобнее воспринимать при длинных элементах. Поскольку маркер выходит за пределы блока, оставьте для него место с помощьюpadding-leftсписка (браузеры добавляют левый отступ по умолчанию именно для этого).insideудобен, когда нельзя позволить себе дополнительный левый отступ — например, в плотно упакованном списке, карточке или макете, где каждый<li>имеет собственный видимый фон или рамку, которая должна охватывать и маркер.
Распространённая ошибка — убрать левый отступ списка и удивляться, почему маркеры outside обрезаются. Если задать padding-left: 0, маркер может выйти за пределы видимой области; переключитесь на inside или восстановите достаточный отступ (см. padding).
Связь с сокращённым свойством list-style
list-style-position — один из трёх компонентов сокращённого свойства list-style наряду с list-style-type и list-style-image. Следующие два объявления равнозначны:
/* Longhand */
ul {
list-style-type: square;
list-style-position: inside;
}
/* Shorthand — type then position */
ul {
list-style: square inside;
}Значения
| Значение | Описание | Попробовать |
|---|---|---|
| outside | Выносит блок маркера за пределы основного блочного контейнера. Это значение по умолчанию. | Попробовать » |
| inside | Помещает блок маркера в качестве первого строчного блока внутри основного блочного контейнера. | Попробовать » |
| initial | Устанавливает значение по умолчанию. | Попробовать » |
| inherit | Наследует значение свойства от родительского элемента. |