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 Значение элемента наследуется от родительского элемента.

Поддержка браузера

chrome firefox safari opera
1.0+ 1.0+ 1.0+ 3.5+

Практикуйте свои знания

В каких случаях свойство CSS list-style-position используется?
Считаете ли это полезным?