Corso di CSS / Stile dei paragrafi e degli elenchi CSS

Il CSS controlla l'allineamento dei paragrafi, l'indentazione, l'interlinea e i margini senza modificare il significato del testo. Per le liste, lo stile e la posizione dei marker influenzano l'aspetto degli elementi avvolti, mentre l'HTML fornisce ancora la struttura e l'ordinamento della lista.

Separare l'interlinea dalla spaziatura dei paragrafi

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

Se aumenti line-height, cresce la distanza tra le righe dello stesso paragrafo: la lezione sui font CSS e sull’interlinea spiega come viene calcolata. Aumentando margin-block si incrementa lo spazio esterno tra il riquadro del paragrafo e il contenuto successivo. Usare i due in modo intercambiabile può sembrare corretto in paragrafi brevi, ma può risultare in uno spazio tra le righe eccessivo in paragrafi lunghi.

margin-block: 0 1.2em imposta il margine all'inizio del blocco a zero e il margine alla fine del blocco a 1.2em. In questo esempio di scrittura orizzontale, questi corrispondono al margine superiore e inferiore. La scrittura verticale cambia le direzioni fisiche. Qui, em utilizza la dimensione del font del paragrafo stesso. Vedi MDN: margin block.

I browser forniscono margini predefiniti per paragrafi e liste. Sovrascrivili intenzionalmente per distinguere tali valori predefiniti dai tuoi spazi. I margini verticali adiacenti dei blocchi possono collassare anziché sommarsi. Questo esempio imposta il margine iniziale del paragrafo a zero e controlla lo spazio tramite il margine finale. Per ulteriori dettagli, vedere Modello a scatola CSS: contenuto, padding, bordo e margine.

Confronta l'allineamento del testo e l'indentazione della prima riga

.article p { text-align: start; }

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

text-align determina l'allineamento del testo all'interno di una linea. start è l'inizio del flusso di testo ed è a sinistra in un documento base da sinistra a destra. Questa non è una proprietà che sposta l'intero riquadro del paragrafo al centro dello schermo. Le descrizioni lunghe allineate al centro hanno posizioni iniziali diverse per ogni linea, quindi scegli innanzitutto un allineamento facile da leggere per il corpo del testo.

text-indent: 1.5em rientra l'inizio della prima linea, non di ogni linea. Nell’esempio è presente class="intro" nel primo paragrafo dell'intero esempio in modo che tu possa osservarlo in azione. Se vuoi rientrare un intero paragrafo, dovrai esaminare altre impostazioni come il padding. Cambia l'allineamento, il rientro e i margini e confronta quali parti si muovono.

Posiziona i marker delle liste e il testo a capo

Usa ol per processi ordinati e ul per elementi in cui l'ordine non è importante. Sostituire visivamente i numeri con pallini tramite CSS non cambia la struttura originale dell'HTML. Scegli prima il significato del contenuto e poi adatta il metodo di visualizzazione.

Con outside, i marcatori delle liste si trovano all'esterno del riquadro del contenuto, quindi riservare spazio all'inizio in linea della lista. In questo esempio da sinistra a destra, padding-inline-start: 1.6em fornisce padding a sinistra. Con inside, il marcatore occupa spazio nella prima riga; le righe successive possono estendersi sotto la sua posizione. Confronta elementi abbastanza lunghi da andare a capo.

Rimuovere i marcatori delle liste richiede anche un controllo di accessibilità. Safari può omettere una lista con list-style: none dall'albero di accessibilità quando si trova fuori da nav. Considerare role="list" quando è necessario mantenere la semantica della lista. L'esempio completo di questa lezione mantiene i suoi marcatori. Vedi MDN: list style.

Separare lo spazio tra gli elementi dallo spazio tra le righe

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

li + li seleziona il li che segue immediatamente un altro li. Non crea spazio extra prima del primo elemento; aggiunge invece margine prima del secondo elemento e di ciascun elemento successivo. Le parti all'interno di un elemento che si estendono su più righe sono controllate dall’interlinea ereditata dalla lista. Se si aumenta solo lo spazio tra gli elementi perché il contenuto è denso, le frasi all'interno dell'elemento possono ancora apparire strette.

Esegui l'esempio completo di paragrafo e lista

Salva il codice qui sotto come UTF-8 in paragraphs.html e aprilo. Le due liste contengono le stesse frasi: puoi confrontare la posizione dei marcatori e l’allineamento delle righe a parità di testo. L'indentazione della prima riga e le liste ordinate sono controllate nello stesso file.

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

Testa ogni modifica dello spazio

1. Riduci la larghezza della finestra in modo che gli elementi dell'elenco si estendano su più di una riga. Con outside, verifica che le righe successive siano allineate all’inizio del testo; con inside, osserva se si estendono sotto la posizione del marcatore.
2. Sostituisci text-indent in .intro con 0. Controlla se la posizione iniziale solo della prima riga del primo paragrafo cambia e ripristinala a 1.5em.
3. Cambia il valore di margin-block-end del paragrafo a 0. Assicurati che lo spazio tra i paragrafi sia ridotto mantenendo la spaziatura tra le righe all'interno del paragrafo. Successivamente, modifica solo line-height a 1.2 per distinguere la differenza e poi ritorna al valore originale.
4. Confronta cambiando 0.45em di li + li a 0 e 1em. Assicurati che l'interlinea all'interno dell'elemento e lo spazio prima del primo elemento non differiscano.

Se un simbolo è troncato, controlla il padding della lista e l'overflow degli elementi esterni. Se solo alcuni paragrafi hanno spazi diversi, controlla il selettore e gli stili predefiniti del browser. 65ch nell'intero esempio è la lunghezza massima basata sulla larghezza del numero 0 e non è un valore fisso per il numero di caratteri.