HTML / Inserire più spazi con NBSP e white-space

Per visualizzare più spazi in HTML, usa   per una breve sequenza o CSS white-space: pre-wrap per preservare spazi e interruzioni di riga nel testo. Scegli con attenzione:   previene anche il normale a capo in quella posizione. Per la spaziatura tra pulsanti o elementi di navigazione, usa CSS gap o margin.

Perché più spazi vengono visualizzati come uno solo

Con l'impostazione usuale white-space: normal, spazi e tabulazioni consecutivi tra parole si comprimono per la visualizzazione. L'indentazione e le nuove righe nel sorgente HTML non definiscono direttamente lo spazio visivo. Una nuova riga nel sorgente non si trasforma sempre in uno spazio visibile: il suo trattamento può dipendere dalla lingua e dal contesto.

Incolla questo esempio completo in un editor di testo, salvalo come spaces.html usando UTF-8, e apri il file in un browser. Non servono librerie né un server. Dopo la modifica, salva e aggiorna il browser. Le parole di esempio usano lettere latine così le differenze sono facili da confrontare.

<!doctype html>
<html lang="it">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Confronto degli spazi HTML</title>
  <style>
    body { font-family: sans-serif; max-width: 42rem; margin: 1rem auto; padding: 0 1rem; }
    .sample { border: 1px solid #777; padding: .5rem; max-width: 18rem; }
    .preserve { white-space: pre-wrap; }
    .keep { white-space: pre; overflow-x: auto; }
    .lines { white-space: pre-line; }
    .actions { display: flex; flex-wrap: wrap; gap: 1rem; }
  </style>
</head>
<body>
  <h1>Confronto degli spazi HTML</h1>
  <h2>normal</h2>
  <p class="sample">Alpha   Beta       Gamma</p>
  <h2>&amp;nbsp;</h2>
  <p class="sample">Alpha&nbsp;&nbsp;&nbsp;Beta</p>
  <p class="sample">10&nbsp;kg</p>
  <h2>pre-wrap</h2>
  <p class="sample preserve">Alpha   Beta
Gamma   Delta   Epsilon   Zeta   Eta   Theta   Iota</p>
  <h2>pre</h2>
  <p class="sample keep">Alpha   Beta
Gamma   Delta   Epsilon   Zeta   Eta   Theta   Iota</p>
  <h2>pre-line</h2>
  <p class="sample lines">Alpha   Beta
Gamma   Delta   Epsilon   Zeta   Eta   Theta   Iota</p>
  <h2>gap</h2>
  <div class="actions"><button type="button">A</button><button type="button">B</button></div>
</body>
</html>

Nel paragrafo normal, il sorgente contiene tre spazi e poi sette spazi tra Alpha, Beta e Gamma, ma ogni sequenza appare normalmente come uno spazio. Seleziona il paragrafo negli strumenti per sviluppatori e ispeziona il suo valore calcolato white-space. Questo distingue i caratteri nel sorgente dal raggruppamento degli spazi durante il rendering.

Inserire spazi non separabili

  è un riferimento HTML a un carattere per uno spazio non separabile, U+00A0. Scriverlo tre volte inserisce tre caratteri che non vengono raggruppati come gli spazi ordinari consecutivi. Può anche mantenere insieme un numero e la sua unità.

<p>Alpha&nbsp;&nbsp;&nbsp;Beta</p>
<p>10&nbsp;kg</p>

Il primo paragrafo inserisce tre spazi non separabili tra Alpha e Beta. Nel secondo paragrafo, 10 kg impedisce un'interruzione di linea normale tra il numero e l'unità. La larghezza reale dipende dal font e dalla dimensione del font; tre spazi non hanno una larghezza fissa in pixel.

Collegare un'intera frase con molti spazi non separabili riduce le possibilità di andare a capo e può causare overflow su uno schermo stretto. Il testo copiato contiene anche un carattere diverso dallo spazio ordinario, U+0020, che può influenzare le ricerche e i confronti di stringa. Evita di ripetere questi caratteri per allineare il contenuto o creare rientri.

Conservare spazi e interruzioni di riga con white-space

Quando spazi ripetuti e interruzioni di linea esplicite sono parti significative del testo, applica white-space: pre-wrap a quell'elemento. Questo li preserva entrambi consentendo ulteriori ritorni a capo per adattarsi alla larghezza disponibile. Questo non garantisce che un URL o una parola lunga senza interruzioni si adatti al riquadro.

Nell'esempio completo, sia pre-wrap che pre mantengono i tre spazi tra Alpha e Beta e la nuova linea prima di Gamma. Stringi la finestra: pre-wrap permette ulteriori ritorni a capo, mentre pre no. L'esempio usa overflow-x: auto per rendere l'ultimo scorrevole orizzontalmente. Con pre-line, le interruzioni di linea esplicite restano, ma gli spazi consecutivi tra le parole vengono raggruppati.

Questa tabella riassume le comuni differenze nell'elaborazione del testo. Non implica che dettagli come la larghezza delle tabulazioni o gli spazi a fine riga si comportino in modo identico. Controlla anche i valori ereditati e altre regole CSS. Definizione di white-space secondo il W3C

Impostare con CSS la distanza tra gli elementi

Per separare due pulsanti, rendi il loro genitore un contenitore flex e imposta gap invece di aggiungere spazi di testo. Usa margin per la spaziatura esterna a un elemento e padding tra il suo bordo e il contenuto. I caratteri di spazio appartengono al contenuto; la spaziatura CSS controlla il layout.

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

Nell'esempio completo, i pulsanti A e B sono separati da gap: 1rem. Un rem si basa sulla dimensione del font dell'elemento radice, quindi non è sempre 16 pixel. Se la larghezza è insufficiente, flex-wrap: wrap permette a un pulsante di passare alla riga successiva. Mantenendo tutto il resto invariato, imposta solamente gap su 0, confronta il risultato e ripristina 1rem.

Cosa controllare se il risultato è diverso

1. Se appare il testo letterale  , verifica che tu stia modificando l'HTML. Incollarlo come testo in un editor visuale, o escaparlo due volte come  , impedisce che diventi uno spazio.
2. Se gli spazi o le interruzioni di linea scompaiono, ispeziona il valore calcolato white-space del paragrafo e conferma che il selettore CSS corrisponda. L'indentazione del sorgente all'interno di un elemento pre-wrap può diventare visibile, quindi rimuovi gli spazi bianchi non intenzionali.
3. Se il contenuto trabocca su dispositivi mobili, restringi la finestra e cerca spazi non separabili ripetuti o un'impostazione pre. A seconda dello scopo, sostituiscili con spazi normali o usa pre-wrap. Controlla di nuovo a una larghezza maggiore dopo aver effettuato la modifica.

Per mostrare la sequenza   in una spiegazione invece di inserire uno spazio, scrivi   nel codice sorgente HTML. Lo standard elenca i riferimenti ai caratteri e i loro corrispondenti caratteri. Elenco dei riferimenti ai caratteri HTML WHATWG