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

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

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

Значение по умолчанию	outside
Применяется	К элементам списка.
Наследуется	Да
Анимируемое	Нет
Версия	CSS1
DOM синтаксис	object.style.listStylePosition = "inside";

Синтаксис

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

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      .inside {
      list-style-position: inside;
      }
      li {
      border: 1px solid #666;
      padding: 5px;
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства list-style-position</h2>
    <p>Установлено значение "inside".</p>
    <ul class="inside">
      <li>Элемент списка 1</li>
      <li>Элемент списка 2</li>
      <li>Элемент списка 3</li>
    </ul>
  </body>
</html>

Попробуйте сами!

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

Рассмотрим пример, где элементы списка расположены вне блока:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      .outside {
      list-style-position: outside;
      }
      li {
      border: 1px solid #666;
      padding: 5px;
      margin-bottom: 15px;
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства list-style-position</h2>
    <p>Установлено значение "outside".</p>
    <ul class="outside">
      <li>Элемент списка 1</li>
      <li>Элемент списка 2</li>
      <li>Элемент списка 3</li>
    </ul>
  </body>
</html>

Попробуйте сами!

Значения

Значение	Описание
outside	Маркер находится за пределами основного блока. Значение по умолчанию.
inside	Маркер находится внутри основного блока.
initial	Устанавливает свойство в значение по умолчанию.
inherit	Значение элемента наследуется от родительского элемента.