Свойство CSS list-style-position

Свойство list-style-position указывает, должен ли маркер элемента списка располагаться внутри или снаружи блока элемента списка.

Свойство list-style-position применяется к элементам списка и к элементам, для которых display установлено в "list-item". По умолчанию к ним относятся элементы <li>. Его также можно задать для родительских элементов: <ol> или <ul>.

Начальное значение	outside
Применяется к	Элементам списка.
Наследуется	Да.
Анимация	Нет.
Версия	CSS1
DOM-синтаксис	object.style.listStylePosition = "inside";

Синтаксис

css

list-style-position: inside | outside | initial | inherit;

Пример свойства list-style-position со значением «inside»:

html

<!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>

Try it Yourself »

Результат

CSS list-style-position Property

В приведённом примере элементы списка расположены внутри блока.

Пример свойства list-style-position со значением «outside»:

html

<!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>

Try it Yourself »

Значения

Значение	Описание	Запустить
outside	Размещает блок маркера за пределами основного блока. Это значение по умолчанию для данного свойства.	Запустить »
inside	Размещает блок маркера в качестве первого встроенного блока внутри основного блока.	Запустить »
initial	Заставляет свойство использовать значение по умолчанию.	Запустить »
inherit	Наследует свойство от родительского элемента.

Практика

Что указывает свойство 'list-style-position' в CSS?

Положение маркера списка.Стиль маркера списка.Цвет маркера списка.Должен ли маркер списка располагаться внутри или снаружи потока контента.

Свойство CSS list-style-position ​

Синтаксис ​

Пример свойства list-style-position со значением «inside»: ​

Результат ​

Пример свойства list-style-position со значением «outside»: ​

Значения ​