Il modo in cui i browser gestiscono lo spazio bianco all'inizio non è molto intuitivo, soprattutto se si confronta il modo in cui Hypertext Markup Language gestisce lo spazio bianco rispetto ai programmi di elaborazione testi. Nel software di elaborazione testi, puoi aggiungere molta spaziatura o tabulazione nel documento e tale spaziatura si rifletterà nella visualizzazione del contenuto del documento. Questo design WYSIWYG non è il caso dell'HTML o delle pagine web.
Spaziatura in stampa
Nel software di elaborazione testi, i tre caratteri spaziali primari sono i spazio, tab, e ritorno a capo. Ciascuno di questi caratteri agisce in modo distinto, ma in HTML i browser li rendono tutti essenzialmente uguali. Sia che tu metta uno spazio o 100 spazi nel tuo Markup HTML o mischiare la spaziatura con tabulazioni e ritorni a capo, tutti questi verranno ridotti in uno spazio quando la pagina viene visualizzata dal browser. Nella terminologia del web design, questo è noto come collasso dello spazio bianco
. Non è possibile utilizzare queste tipiche chiavi di spaziatura per aggiungere spazi bianchi in una pagina Web perché il browser comprime gli spazi ripetuti in un solo spazio quando viene visualizzato nel browser,Utilizzo di CSS per creare tabulazioni e spaziatura HTML
I siti web oggi sono costruiti con una separazione tra struttura e stile. La struttura di una pagina è gestita dall'HTML mentre lo stile è dettato dai Cascading Style Sheets. Per creare una spaziatura o ottenere un determinato layout, passa ai CSS invece di aggiungere caratteri di spaziatura al codice HTML.
Se stai cercando di usare schede per creare colonne di testo, usa invece
Se i dati che stai disponendo sono dati tabulari, usa le tabelle per allinearli come desideri. Le tabelle spesso subiscono una cattiva reputazione nel web design perché sono state abusate come puri strumenti di layout per così tanti anni, ma le tabelle sono ancora perfettamente valide se il tuo contenuto contiene dati genuinamente tabulari.
Margini, spaziatura interna e rientro del testo
Il modo più comune per creare spaziatura con i CSS consiste nell'utilizzare uno dei seguenti stili CSS:
- margine
- imbottitura
- indentatura del testo
Ad esempio, fai rientrare la prima riga di un paragrafo come una tabulazione con il seguente CSS (nota che questo presuppone che il tuo paragrafo abbia un attributo di classe "first" allegato):
p.prima {
rientro del testo: 5em;
}
Questo paragrafo fa rientrare circa cinque caratteri.
Usa le proprietà margin o padding in CSS per aggiungere spaziatura alla parte superiore, inferiore, sinistra o destra (o combinazioni di quei lati) di un elemento. Ottieni qualsiasi tipo di spaziatura necessaria rivolgendoti ai CSS.
Spostare il testo più di uno spazio senza CSS
Se tutto ciò che desideri è che il tuo testo venga spostato di più di uno spazio rispetto all'elemento precedente, usa lo spazio unificatore.
Per utilizzare lo spazio unificatore, aggiungi tutte le volte che ne hai bisogno nel tuo markup HTML.
L'HTML rispetta questi spazi unificatori e non li comprime in un unico spazio. Tuttavia, questo approccio è considerato una pratica scadente poiché aggiunge markup HTML extra a un documento solo per soddisfare le esigenze di layout. Quando possibile, evitare di aggiungere spazi unificati semplicemente per ottenere l'effetto di layout e utilizzo desiderati Margini CSS e padding anziché.