Aggiungere spazi in HTML
Scrivi cinque spazi tra due parole in HTML e il browser ne mostra uno. Qualsiasi sequenza di spazi, tabulazioni e a capo si riduce a un solo spazio. Per aggiungere spazi in più, usa l'entità dello spazio indivisibile , una volta per ogni spazio:
va bene per qualche spazio in una riga di testo. Per spazi più grandi, o per lo spazio tra elementi, usa il CSS, come vedrai più avanti.
Cosa fa
è lo spazio indivisibile (carattere U+00A0). Ha due effetti:
- Non si riduce mai, quindi tre di fila fanno tre spazi.
- La riga non va mai a capo in quel punto, quindi le parole ai due lati restano insieme.
Il secondo è il suo vero compito. Numeri e unità di misura, iniziali e frasi brevi che stanno male divise su due righe si uniscono con :
Nel riquadro grigio "10" e "km" finiscono su righe diverse. In quello verde non si possono separare. Per tenere insieme un tratto più lungo, white-space: nowrap su uno span è più comodo che concatenare entità; vedi la pagina su come andare a capo.
Entità di spazio di larghezze diverse
L'HTML ha caratteri con nome per spazi più larghi e più stretti. Nemmeno loro si riducono, quindi sono comodi per regolare con precisione la spaziatura nel testo:
| Entità | Nome | Larghezza |
|---|---|---|
| Spazio indivisibile | Uguale a uno spazio normale |
  | Spazio en | Mezzo em |
  | Spazio em | Un em (la dimensione del font) |
  | Spazio sottile | Una frazione di em, dipende dal font |
  | Spazio indivisibile stretto | Sottile, e senza andare a capo |
L'evidenziazione blu mostra la larghezza di ogni spazio. Solo e   impediscono anche di andare a capo.
Mantenere tutti gli spazi: pre e white-space
Quando la spaziatura fa parte del contenuto (codice, ASCII art, colonne allineate, poesia), mantieni tutti gli spazi bianchi invece di aggiungere entità. L'elemento <pre> lo fa per impostazione predefinita, e la proprietà CSS white-space lo fa per qualsiasi elemento:
Valore di white-space | Spazi | A capo | Manda a capo le righe lunghe |
|---|---|---|---|
normal (predefinito) | Si riducono | Diventano spazi | Sì |
nowrap | Si riducono | Diventano spazi | No |
pre | Mantenuti | Mantenuti | No |
pre-wrap | Mantenuti | Mantenuti | Sì |
pre-line | Si riducono | Mantenuti | Sì |
Per il testo degli utenti di solito ti serve pre-wrap: mantiene la spaziatura e va comunque a capo sugli schermi stretti. pre lascia le righe come sono e invece scorre o esce dal riquadro.
Anche le tabulazioni vengono mantenute dentro pre. La loro larghezza è di 8 spazi per impostazione predefinita e la proprietà tab-size la cambia (tab-size: 4).
Spaziatura con il CSS
La maggior parte delle volte in cui "serve uno spazio qui" si tratta in realtà di layout, e il CSS lo fa meglio delle entità, perché lo spazio resta coerente e si cambia in un solo punto:
margin e padding distanziano gli elementi, gap distanzia le voci in un contenitore flex o grid, letter-spacing e word-spacing distanziano il testo stesso. Per far rientrare la prima riga di un paragrafo, usa text-indent, spiegato nella pagina su come centrare il testo.
Lo spazio tra elementi inline
Il rovescio della medaglia della riduzione: lo spazio bianco tra due elementi inline o inline-block conta comunque come uno spazio. Un a capo tra due pulsanti nel sorgente mette un piccolo spazio tra loro:
La prima coppia ha uno spazio dovuto all'a capo nel sorgente. In un contenitore flex lo spazio bianco tra le voci viene ignorato, quindi la seconda coppia si tocca. Usa flex e gap quando vuoi controllare lo spazio con precisione.
Errori comuni
- Catene di
per il layout. Si rompono appena cambiano il font o la dimensione dello schermo. Usamargin,paddingogap. - Scrivere spazi in più e aspettarsi di vederli. Si riducono. Usa
owhite-space: pre-wrap. - Scrivere
 senza il punto e virgola. Di solito i browser lo accettano, ma non è valido e in alcune posizioni non funziona. Chiudi sempre con;. - Usare
ovunque per impedire l'a capo. Un lungo tratto di testo indivisibile esce dallo schermo sui telefoni. Unisci solo ciò che deve restare insieme. - Far rientrare i paragrafi con gli spazi. Usa
text-indentin CSS.
Domande frequenti
Come aggiungo uno spazio in HTML?
Uno spazio singolo funziona così come lo scrivi, ma gli spazi in più si riducono a uno. Per averne di più, usa l'entità dello spazio indivisibile , una per ogni spazio: a b. Per gli spazi di layout, usa invece margin, padding o gap del CSS.
Cosa significa in HTML?
è uno spazio indivisibile (non-breaking space). Sembra uno spazio normale, ma il browser non va mai a capo in quel punto e non lo riduce mai, quindi tiene insieme parole come 10 km e ti permette di aggiungere spazi in più.
Perché l'HTML ignora i miei spazi?
L'HTML riduce gli spazi bianchi: qualsiasi sequenza di spazi, tabulazioni e a capo viene mostrata come un unico spazio, e gli spazi all'inizio e alla fine di una riga vengono rimossi. Usa , <pre> o la proprietà CSS white-space per mantenerli.
Come aggiungo una tabulazione in HTML?
Fuori dal testo preformattato l'HTML non ha una tabulazione visibile. Dentro <pre> o in un elemento con white-space: pre, un carattere di tabulazione viene mantenuto e la proprietà CSS tab-size ne imposta la larghezza. Per far rientrare un paragrafo, usa text-indent o padding-inline-start in CSS.
Che differenza c'è tra e  ?
è largo quanto uno spazio normale.   è largo mezzo em e   un em (la larghezza della dimensione del font).   e   non si riducono, ma a differenza di la riga può comunque andare a capo in quel punto.
