Propiedad CSS list-style-position

La propiedad list-style-position controla si el marcador de un elemento de lista (la viñeta o el número) se sitúa dentro o fuera de la caja del elemento. Es un detalle pequeño pero visible: decide si el texto que se ajusta en un elemento de lista largo se alinea bajo el marcador o bajo la primera línea de texto.

Esta página explica ambos valores, cómo la elección afecta la sangría y el ajuste del texto, cómo se relaciona la propiedad con la abreviatura list-style, y cuándo conviene usar cada valor.

Cómo se aplica

list-style-position funciona en cualquier elemento cuyo display sea list-item. Por defecto, eso significa los elementos <li>. Como la propiedad es heredada, normalmente se establece una vez en la lista padre — <ul> o <ol> — y todos los elementos la heredan.

Valor inicial	outside
Se aplica a	Elementos de lista.
Heredada	Sí.
Animatable	No.
Versión	CSS1
Sintaxis DOM	object.style.listStylePosition = "inside";

Sintaxis

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

Ejemplos

Ejemplo con el 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>

Pruébalo tú mismo »

Resultado

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

Con inside, el marcador pasa a formar parte del contenido del elemento. Se sitúa dentro de la caja, por lo que el borde de cada <li> envuelve al marcador, y cualquier texto que pase a una segunda línea se alinea bajo el marcador en lugar de bajo la primera línea de texto.

Ejemplo con el 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>

Pruébalo tú mismo »

Con outside (el valor por defecto), el marcador se desplaza hacia el área a la izquierda de la caja. El borde ahora solo rodea el texto, y las líneas que se ajustan se alinean con la primera línea de texto en lugar de con el marcador — el aspecto habitual de la mayoría de las listas en la web.

Elegir un valor

outside es la opción convencional. El texto ajustado permanece alineado de forma ordenada, lo que facilita la lectura en elementos largos. Dado que el marcador cuelga fuera de la caja, deja espacio para él con el padding-left de la lista (los navegadores añaden un relleno izquierdo por defecto para este fin).
inside es útil cuando no se puede permitir el margen izquierdo adicional — por ejemplo, una lista en una caja estrecha, una tarjeta, o un diseño donde cada <li> tiene su propio fondo o borde visible que también debe envolver al marcador.

Un error común es eliminar el relleno izquierdo de la lista y luego preguntarse por qué los marcadores outside quedan recortados. Si estableces padding-left: 0, el marcador puede quedar fuera del área visible; cambia a inside o restaura el relleno suficiente (véase padding).

Relación con la abreviatura list-style

list-style-position es uno de los tres componentes de la abreviatura list-style, junto con list-style-type y list-style-image. Estas dos declaraciones son equivalentes:

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

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

Valores

Valor	Descripción	Pruébalo
outside	Coloca la caja del marcador fuera de la caja de bloque principal. Es el valor por defecto de esta propiedad.	Pruébalo »
inside	Establece la caja del marcador como primer elemento de línea dentro de la caja de bloque principal.	Pruébalo »
initial	Hace que la propiedad use su valor por defecto.	Pruébalo »
inherit	Hereda la propiedad de su elemento padre.

Práctica

¿Qué especifica la propiedad 'list-style-position' en CSS?

La posición del marcador de lista.El estilo del marcador de lista.El color del marcador de lista.Si el marcador de lista debe aparecer dentro o fuera del flujo de contenido.