Propiedad CSS list-style-position

La propiedad list-style-position especifica si el marcador de un elemento de lista debe estar dentro o fuera del cuadro del elemento de lista.

La propiedad list-style-position se aplica a los elementos de lista y a los elementos cuyo display está establecido en "list-item". Por defecto, esto incluye los elementos <li>. También se puede establecer en elementos padre: <ol> o <ul>.

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

Sintaxis

css

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

Ejemplo de la propiedad list-style-position con el valor "inside":

html

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

Try it Yourself »

Resultado

CSS list-style-position Property

En el ejemplo dado, los elementos de la lista están posicionados dentro del cuadro.

Ejemplo de la propiedad list-style-position con el valor "outside":

html

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

Try it Yourself »

Valores

Valor	Descripción	Probarlo
outside	Coloca el cuadro del marcador fuera del cuadro de bloque principal. Es el valor predeterminado de esta propiedad.	Probarlo »
inside	Establece el cuadro del marcador como el primer cuadro en línea dentro del cuadro de bloque principal.	Probarlo »
initial	Hace que la propiedad use su valor predeterminado.	Probarlo »
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 la lista.El estilo del marcador de la lista.El color del marcador de la lista.Si el marcador de la lista debe aparecer dentro o fuera del flujo de contenido.

Propiedad CSS list-style-position ​

Sintaxis ​

Ejemplo de la propiedad list-style-position con el valor "inside": ​

Resultado ​

Ejemplo de la propiedad list-style-position con el valor "outside": ​

Valores ​