Клавиша / esc

list-style-position

Можно двигать маркеры списка внутрь или наружу строки.

Время чтения: меньше 5 мин

Кратко

Скопировано

Свойство list-style-position задаёт положение маркера списка относительно элемента списка.

Пример

Скопировано
        
          
          .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-item. Как правило, это элементы списка <li>. Но так как это свойство наследуется, то обычно его задают самому списку <ul>, чтобы оно применилось ко всем элементам списка сразу.

На практике

Скопировано

Денис Ежков советует

Скопировано

🛠 В реальных проектах свойство используется очень редко, потому что работает только с «родными» маркерами списков. Дизайнеры в макетах повсеместно рисуют стилизованные маркеры, которые сверстать можно только с использованием псевдоэлементов ::before.