Propriedade CSS list-style-position

A propriedade list-style-position controla se o marcador de um item de lista (o bullet ou número) fica dentro ou fora da caixa do item. É um detalhe pequeno, mas visível: define se o texto que quebra linha em um item longo se alinha sob o marcador ou sob a primeira linha de texto.

Esta página explica os dois valores, como a escolha afeta o recuo e a quebra de linha do texto, como a propriedade se relaciona com o atalho list-style e quando usar cada valor.

Como se aplica

list-style-position funciona em qualquer elemento cujo display seja list-item. Por padrão, isso significa elementos <li>. Como a propriedade é herdada, normalmente você a define uma vez no elemento pai da lista — <ul> ou <ol> — e todos os itens a herdam.

Valor Inicial	outside
Aplica-se a	Itens de lista.
Herdada	Sim.
Animável	Não.
Versão	CSS1
Sintaxe DOM	object.style.listStylePosition = "inside";

Sintaxe

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

Exemplos

Exemplo com o valor "inside"

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

Experimente Você Mesmo »

Resultado

![Propriedade CSS list-style-position](https://api.w3docs.com/uploads/media/default/0001/03/f9df27bcea2db32f3bb0f4290142c7eea8e2ff47.png "Exemplo de list-style-position inside em CSS" =420x)

Com inside, o marcador passa a fazer parte do conteúdo do item. Ele fica dentro da caixa, então a borda de cada <li> envolve o marcador, e qualquer texto que quebre para uma segunda linha se alinha sob o marcador em vez de sob a primeira linha de texto.

Exemplo com o valor "outside"

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

Experimente Você Mesmo »

Com outside (o padrão), o marcador é empurrado para a área à esquerda da caixa. A borda agora envolve apenas o texto, e as linhas que quebram se alinham com a primeira linha de texto em vez de com o marcador — a aparência familiar da maioria das listas na web.

Escolhendo um valor

outside é a escolha convencional. O texto que quebra linha permanece bem alinhado, o que facilita a leitura em itens longos. Como o marcador fica fora da caixa, deixe espaço para ele com o padding-left da lista (os navegadores adicionam um padding esquerdo padrão exatamente por isso).
inside é útil quando não é possível ter a margem esquerda extra — por exemplo, em uma lista com box apertado, um card ou um layout em que cada <li> tem seu próprio fundo ou borda visível que deve envolver o marcador também.

Um erro comum é remover o padding esquerdo da lista e depois se perguntar por que os marcadores outside ficam cortados. Se você definir padding-left: 0, o marcador pode ser empurrado para fora da área visível; troque para inside ou restaure um padding suficiente (veja padding).

Relação com o atalho list-style

list-style-position é um dos três componentes do atalho list-style, ao lado de list-style-type e list-style-image. Essas duas declarações são equivalentes:

/* Longhand */
ul {
  list-style-type: square;
  list-style-position: inside;
}

/* Shorthand — type then position */
ul {
  list-style: square inside;
}

Valores

Valor	Descrição	Experimente
outside	Coloca a caixa do marcador fora da caixa de bloco principal. É o valor padrão desta propriedade.	Experimente »
inside	Define a caixa do marcador como a primeira caixa inline na caixa de bloco principal.	Experimente »
initial	Faz a propriedade usar seu valor padrão.	Experimente »
inherit	Herda a propriedade do elemento pai.

Prática

O que a propriedade 'list-style-position' em CSS especifica?

A posição do marcador da lista.O estilo do marcador da lista.A cor do marcador da lista.Se o marcador da lista deve aparecer dentro ou fora do fluxo de conteúdo.