Curso de CSS / estilos de párrafos y listas

CSS controla la alineación de párrafos, la sangría, el espaciado entre líneas y los márgenes sin cambiar el significado del texto. Para las listas, el estilo y la posición del marcador afectan la apariencia de los elementos cuyo texto ocupa varias líneas, mientras que HTML todavía proporciona la estructura y el orden de la lista.

Separa el espaciado de línea del espaciado de párrafo

.article p {
  line-height: 1.65;
  margin-block: 0 1.2em;
}

Si aumentas line-height, explicado en el artículo sobre fuentes y altura de línea, la disposición de las líneas en el mismo párrafo se vuelve más amplia. Aumentar margin-block incrementa el espacio exterior entre el cuadro del párrafo y el contenido siguiente. Usar ambos de manera intercambiable puede verse bien en párrafos cortos, pero puede resultar en un espaciado de líneas excesivo en párrafos largos.

margin-block: 0 1.2em establece el margen de inicio del bloque en cero y el margen de fin del bloque en 1.2em. En este ejemplo de escritura horizontal, esos son arriba y abajo. La escritura vertical cambia las direcciones físicas. Aquí, em usa el tamaño de fuente del propio párrafo. Ver MDN: margin block.

Los navegadores proporcionan márgenes predeterminados para párrafos y listas. Sobrescríbelos deliberadamente para distinguir esos valores predeterminados de tu propio espaciado. Los márgenes verticales adyacentes de bloques pueden colapsarse en lugar de sumarse. Este ejemplo establece el margen inicial del párrafo en cero y controla la separación con su margen final. Para más detalles, consulta El modelo de caja CSS: Contenido, Relleno, Borde y Margen.

Compara la alineación de texto y la sangría de la primera línea

.article p { text-align: start; }

.article .intro { text-indent: 1.5em; }

text-align determina la alineación del texto dentro de una línea. start es el comienzo del flujo de texto y está a la izquierda en un documento básico de izquierda a derecha. Esta no es una propiedad que mueva todo el cuadro del párrafo al centro de la pantalla. Las descripciones largas centradas tienen diferentes posiciones iniciales para cada línea, así que primero elige una alineación fácil de leer para el cuerpo.

text-indent: 1.5em sangra el inicio de la primera línea, no cada línea. Puse class="intro" en el primer párrafo de todo el ejemplo para que puedas observarlo en acción. Si deseas sangrar un párrafo completo, necesitarás revisar otros ajustes como el relleno. Cambia la alineación, la sangría y los márgenes, y compara qué partes se mueven.

Coloca los marcadores y el texto de listas de varias líneas

Usa ol para procesos ordenados y ul para elementos donde el orden no es importante. Cambiar la forma del número a un punto en CSS no cambia la estructura HTML original. Elige primero el significado del contenido y luego ajusta el método de visualización.

Con outside, los marcadores de lista se sitúan fuera del cuadro de contenido, por lo que se debe reservar espacio al inicio en línea de la lista. En este ejemplo de izquierda a derecha, padding-inline-start: 1.6em proporciona un relleno a la izquierda. Con inside, el marcador ocupa espacio en la primera línea; las líneas posteriores pueden extenderse debajo de su posición. Compara elementos reales cuyo texto ocupe varias líneas.

Eliminar los marcadores de lista también requiere una verificación de accesibilidad. Safari puede omitir una lista con list-style: none del árbol de accesibilidad cuando está fuera de nav. Considera role="list" cuando sea necesario mantener la semántica de la lista. El ejemplo completo de esta lección mantiene sus marcadores. Vea MDN: estilo de lista.

Separa el espacio entre elementos del interlineado

.article li + li { margin-block-start: 0.45em; }

li + li selecciona el li que viene inmediatamente después de otro li. No crea espacio adicional antes del primer elemento, solo entre el segundo y los elementos posteriores. Las partes dentro de un elemento que se extienden en varias líneas están controladas por la altura de línea heredada de la lista. Si solo aumentas el espaciado entre elementos porque el contenido es denso, las oraciones dentro del elemento aún pueden parecer estrechas.

Ejecuta el ejemplo completo de párrafo y lista

Guarda el siguiente código como UTF-8 en paragraphs.html y ábrelo. Como hemos mantenido las oraciones en ambas listas iguales, solo podemos comparar dónde aparecen. La sangría de la primera línea y las listas ordenadas también se verifican en el mismo archivo.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Comparing paragraphs and lists</title>
  <style>
    body { margin: 24px; font-family: sans-serif; color: #333; }
    .article { max-width: 65ch; }
    .article p { line-height: 1.65; margin-block: 0 1.2em; text-align: start; }
    .article .intro { text-indent: 1.5em; }
    .article ul, .article ol { padding-inline-start: 1.6em; margin-block: 0 1.2em; line-height: 1.65; }
    .article li + li { margin-block-start: 0.45em; }
    .outside { list-style-position: outside; }
    .inside { list-style-position: inside; }
    ol { list-style-type: decimal; }
  </style>
</head>
<body>
  <main class="article">
    <h1>Small Garden visitor guide</h1>
    <p class="intro">If this is your first visit, check the signs first. This paragraph has a first-line indent. When the text wraps, the remaining lines return to the normal paragraph edge.</p>
    <p>Use line-height for spacing between lines and margin for spacing between paragraphs. Narrow the window and check readability as the text wraps onto more lines.</p>
    <h2>outside list</h2>
    <ul class="outside">
      <li>Check the soil before watering. Wipe up water spilled outside the pot so that other visitors do not slip.</li>
      <li>Read the labels and signs, then follow the path. Compare how the second line of a wrapped list item aligns with its first line.</li>
    </ul>
    <h2>inside list</h2>
    <ul class="inside">
      <li>Check the soil before watering. Wipe up water spilled outside the pot so that other visitors do not slip.</li>
      <li>Read the labels and signs, then follow the path. Compare how the second line of a wrapped list item aligns with its first line.</li>
    </ul>
    <h2>Preparation in order</h2>
    <ol><li>Read the notice.</li><li>Prepare a watering can.</li><li>Put tools back after use.</li></ol>
  </main>
</body>
</html>

Prueba cada cambio de espaciado

1. Reduce el ancho de la ventana para que los elementos de la lista ocupen más de una línea. Con outside, comprueba si el texto de las líneas siguientes se alinea con el texto de la primera. Con inside, observa si puede extenderse por debajo del marcador.
2. Reemplaza text-indent en .intro por 0. Comprueba si la posición inicial solo de la primera línea del primer párrafo cambia y vuelve a 1.5em.
3. Cambia el segundo valor de margin-block del párrafo, su margen final, de 1.2em a 0. Asegúrate de que el espacio entre párrafos se reduzca mientras se mantiene el interlineado dentro del párrafo. Luego, cambia solo la altura de línea a 1.2 para distinguir la diferencia y luego vuelve al valor original.
4. Compara cambiando 0.45em de li + li a 0 y 1em. Asegúrate de que el espaciado de línea dentro del ítem y el espacio antes del primer ítem no difieran.

Si un símbolo está truncado, verifica el relleno de la lista y el desbordamiento de los elementos externos. Si solo algunos párrafos tienen un espaciado diferente, revisa el selector y los estilos predeterminados del navegador. 65ch en todo el ejemplo es la longitud máxima basada en el ancho del número 0 y no es un valor fijo para el número de caracteres.