Propiedad list-style-position

DefiniciónEstablece la posición del marcador de los elementos de la lista
Valores
permitidos
Uno y sólo uno de los siguientes valores:
Valor inicialoutside
Se aplica aTodos los elementos de tipo elemento de lista
Válida enmedios visuales
Se heredasi
Definición en
el estándar
w3.org/TR/CSS21/generate.html#propdef-list-style-position

Ejemplos de uso

La propiedad list-style-position establece la posición del marcador de un elemento de lista respecto al contenido de ese mismo elemento.

El valor por defecto que aplican los navegadores es outside, que hace que el marcador se muestre fuera de la caja invisible que encierra al contenido del elemento. El otro valor disponible es inside, que hace que el marcador se muestre dentro de la caja invisible que encierra al contenido del elemento.

Si el contenido de los elementos de la lista ocupa menos de una línea, no se aprecian las diferencias visuales entre inside y outside, tal y como se muestra en el siguiente ejemplo:

  • list-style-position: outside
  • Lorem ipsum dolor sit amet
  • Consectetuer adipiscing elit
  • Nullam quis felis
  • Aliquam erat volutpat
  • Aenean non mauris
  • list-style-position: inside
  • Lorem ipsum dolor sit amet
  • Consectetuer adipiscing elit
  • Nullam quis felis
  • Aliquam erat volutpat
  • Aenean non mauris

Sin embargo, cuando el contenido de un elemento de la lista ocupa más de una línea, se aprecian claramente las diferencias visuales entre un marcador externo (outside) y un marcador interno (inside):

  • list-style-position: outside
  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam ultrices nibh a neque.
  • Integer ac est quis turpis placerat varius. Sed tempor viverra quam. Praesent in lacus ac lorem scelerisque consectetuer.
  • Vestibulum pellentesque pretium ligula. Pellentesque tincidunt. Sed sit amet dui.
  • list-style-position: inside
  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam ultrices nibh a neque.
  • Integer ac est quis turpis placerat varius. Sed tempor viverra quam. Praesent in lacus ac lorem scelerisque consectetuer.
  • Vestibulum pellentesque pretium ligula. Pellentesque tincidunt. Sed sit amet dui.

El estándar de CSS 2.1 no especifica la posición exacta de un marcador externo o interno, por lo que si visualizas esta página en diferentes navegadores, se pueden apreciar diferencias visuales en los ejemplos anteriores.