list-style-position

Свойство 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.