Propriedade list-style-position

A propriedade list-style-position define como o marcador da lista será exibido: dentro ou fora do elemento de lista ul ou ol.

Sintaxe

cssseletor {
  list-style-position: inside | outside;
}

Valores

Valor Descrição
inside O marcador fica dentro do elemento da lista.
outside O marcador fica fora do elemento da lista.

Valor padrão: outside.

Exemplo . Valor inside

html<ul>
  <li>item da lista</li>
  <li>item da lista</li>
  <li>item da lista</li>
  <li>item da lista</li>
  <li>item da lista</li>
</ul>
cssul {
  list-style-position: inside;
  border: 1px solid red;
  width: 200px;
  padding-left: 0;
  margin-left: 10px;
}

Результат:

Exemplo . Valor outside

html<ul>
  <li>item da lista</li>
  <li>item da lista</li>
  <li>item da lista</li>
  <li>item da lista</li>
  <li>item da lista</li>
</ul>
cssul {
  list-style-position: outside;
  border: 1px solid red;
  width: 200px;
  padding-left: 0;
  margin-left: 10px;
}

Результат:

Veja também

  • a propriedade list-style-type,
    que define o tipo de marcadores da lista
  • a propriedade list-style-type,
    que define o tipo de marcadores da lista
  • a propriedade list-style,
    que é uma abreviação para os marcadores