Sangría de lista HTML

Esta publicación analizará muchas formas de sangrar texto/lista en un documento HTML.

La cantidad de espacio entre las líneas de texto en un bloque o en la esquina izquierda y los componentes de la lista está determinada por el estilo de sangría del texto/lista. Por lo general, denota el comienzo de un párrafo.

Al referirse al texto, sangría o sangría se refiere al cambio de distancia entre los márgenes izquierdo y derecho de un párrafo. Mueva el cursor al comienzo de la línea y presione la tecla Tab en el teclado para sangrar el texto.

Sangría de lista en HTML

Las Listas HTML se utilizan para expresar listas de información. Cada lista puede tener uno o más componentes de lista.

Las listas HTML se clasifican en tres tipos.

1. ol - Lista numerada u ordenada
2. ul - Lista (sin ordenar o con viñetas)
3. dl - Lista de Descripciones o Lista de Definiciones

Los elementos de lista desordenados (<ul>) sangran sus elementos de lista de forma predeterminada. Si desea ajustar la distancia de sangría, puede hacerlo con CSS.

Hay dos técnicas para enumerar la sangría que se usa a menudo.

1. margin-left: este atributo se utiliza para establecer el área de margen en el lado izquierdo de un elemento. Un valor positivo lo aleja de sus vecinos, mientras que un número negativo lo acerca.
2. padding-left: este atributo se utiliza para especificar la cantidad de espacio entre el contenido y el borde. El atributo padding-left especifica el relleno izquierdo (espacio) de un elemento.

En CSS, “relleno” es el área entre el borde y el contenido de un elemento, mientras que un “margen” es un área que rodea el borde de un elemento.

La propiedad relleno controla el espacio interior de un elemento, y la propiedad margen controla el área que lo rodea.

Para comprender mejor el concepto anterior, considere el siguiente ejemplo.

<ul class="outerUL">
  <li>Tea</li>
  <li>Coffee
    <ul class="innerUL">
    <li>Black coffee</li>
    <li>Green coffee</li>
    </ul>
  </li>
  <li>Milk Shake</li>
</ul>

.innerUL {
    padding-left: 50px;
}

.outerUL {
    margin-left: 100px;
}

En el ejemplo anterior, definimos una lista desordenada y una lista desordenada anidada. La propiedad margin-left se usa para sangrar la lista externa, y la propiedad padding-left se usa para sangrar la lista interna.

Ejecute la línea de código anterior en cualquier navegador compatible con HTML.