Кратко
Секция статьи "Кратко"Свойство list
задаёт положение маркера списка относительно элемента списка.
Пример
Секция статьи "Пример".inside { list-style-position: inside; list-style-type: square;}
.inside { list-style-position: inside; list-style-type: square; }
Как пишется
Секция статьи "Как пишется"Ключевые слова:
.selector { list-style-position: inside; list-style-position: outside;}
.selector { list-style-position: inside; list-style-position: outside; }
Как это понять
Секция статьи "Как это понять"Свойство указывает, будет ли маркер являться частью содержимого в элементе списка (inside
), либо будет находиться вне элемента (outside
).
Подсказки
Секция статьи "Подсказки"💡 По умолчанию свойство имеет значение outside
.
💡 Это свойство применяется к элементам, у которых свойство display
имеет значение list
. Как правило, это элементы списка <li>
. Но так как это свойство наследуется, то обычно его задают самому списку <ul>
, чтобы оно применилось ко всем элементам списка сразу.
На практике
Секция статьи "На практике"🛠 В реальных проектах свойство используется очень редко, потому что работает только с «родными» маркерами списков. Дизайнеры в макетах повсеместно рисуют стилизованные маркеры, которые сверстать можно только с использованием псевдоэлементов
.