Propriedade List Marker Position
Última atualização: 2026-09-13
list-style-position Propriedade List Marker Position
list-style-position controla se o marcador da lista fica dentro ou fora do bloco de conteúdo do item de lista. O padrão outside coloca o marcador fora do bloco de conteúdo, alinhando a primeira linha do texto limpamente; inside puxa o marcador para dentro do bloco, fazendo o texto envolvê-lo. Afeta o fluxo e o recuo da lista.
| Categoria | |
|---|---|
| Valor Inicial | outside |
| Herdado | Não |
| Aplica-se A | |
| Tipo de Animação | |
| Versão CSS | CSS1 |
| Status | Padrão |
📝 Sintaxe
list-style-position: outside | inside;⚙️ Valores
| Valor | Tipo | Descrição |
|---|---|---|
outside | inside | Palavra-chave | Posição do marcador |
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo no playground:
🌐 Suporte dos Navegadores
| Navegador |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| list-style-position | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Suportado em todos os principais navegadores | |||||
Dica： outside é o padrão e mantém as linhas seguintes alinhadas com a primeira; inside serve para texto curto e deixa marcador e texto visualmente compactos.
❓ Perguntas Frequentes
QComo outside e inside afetam o layout da lista?
Aoutside (o padrão): o marcador fica fora do bloco de conteúdo do li, então o bloco de texto é alinhado à esquerda como um todo, todas as linhas se alinham e o marcador mantém seu espaço padrão do texto. inside: o marcador fica dentro do bloco de conteúdo, então a primeira linha é empurrada para dentro e as linhas seguintes alinham sob o marcador. outside serve para texto longo multilinha; inside parece mais compacto.
QPor que o texto fica mais limpo com outside?
APorque no modo outside o marcador não ocupa largura do bloco de conteúdo, o bloco de texto é um retângulo limpo cujas bordas esquerdas alinham em toda linha. No modo inside a primeira linha é recuada pelo marcador, então a primeira linha não se alinha mais com as seguintes. Para listas multilinha, mantenha o padrão outside para que toda linha alinhe.
QComo centralizo verticalmente os marcadores da lista com o texto?
Alist-style-position não ajusta fino do alinhamento do marcador. A abordagem comum: list-style: none para remover o marcador, li::before inserindo content: "•" (ou um ícone), e flex com align-items: center para centralizar o marcador em relação ao texto, depois controlar o espaçamento uniformemente.
🏷️ Propriedades Relacionadas
💡 Casos relacionados
📚 Tutoriais Relacionados
Propriedade list-style
O shorthand para estilos de lista
Propriedade list-style-type
Define o tipo de marcador da lista
