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.