| Definición | Establece la posición del marcador de los elementos de la lista |
|---|---|
| Valores permitidos | Uno y sólo uno de los siguientes valores:
|
| Valor inicial | outside |
| Se aplica a | Todos los elementos de tipo elemento de lista |
| Válida en | medios visuales |
| Se hereda | si |
| 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.