La creazione di spazi e la separazione fisica degli elementi in HTML può essere difficile da comprendere per il web designer principiante. Questo è perché HTML ha una proprietà nota come "collasso degli spazi bianchi". indipendentemente dal fatto che tu digiti 1 spazio o 100 nel codice HTML, il browser Web riduce automaticamente tali spazi a un solo spazio. Questo è diverso da un programma come Microsoft Word, che consente ai creatori di documenti di aggiungere più spazi per separare parole e altri elementi di quel documento. Non è così che funziona la spaziatura del design del sito web.
Quindi, come si aggiungono spazi bianchi in HTML che vengono visualizzati sul? pagina web che hai costruito? Questo articolo esamina alcuni dei diversi modi.
Spazi in HTML con CSS
Il modo preferito per aggiungere spazi nel tuo HTML è con Fogli di stile a cascata (CSS). I CSS dovrebbero essere usati per aggiungere qualsiasi aspetto visivo di una pagina web, e poiché la spaziatura fa parte delle caratteristiche di progettazione visiva di una pagina, CSS è dove vuoi che questo sia fatto.
In CSS, puoi utilizzare le proprietà margin o padding per aggiungere spazio attorno agli elementi. Inoltre, la proprietà text-indent aggiunge spazio alla parte anteriore del testo, ad esempio per il rientro dei paragrafi.
Ecco un esempio di come usare i CSS per aggiungere spazio davanti a tutti i tuoi paragrafi. Aggiungi il seguente CSS al tuo esterno o interno foglio di stile:
p {
rientro del testo: 3em;
}
Spazi in HTML all'interno del tuo testo
Se vuoi solo aggiungere uno o due spazi aggiuntivi al testo, puoi utilizzare lo spazio unificatore. Questo carattere si comporta proprio come un carattere spazio standard, solo che non si comprime all'interno del browser.
Ecco un esempio di come aggiungere cinque spazi all'interno di una riga di testo:
Questo testo ha cinque spazi extra al suo interno
Utilizza l'HTML:
Questo testo ha cinque spazi extra al suo interno
Puoi anche usare il
tag per aggiungere interruzioni di riga extra.
Questa frase ha cinque interruzioni di riga alla fine
Perché la spaziatura in HTML è una cattiva idea
Sebbene queste opzioni funzionino entrambe, l'elemento spazi unificatore aggiungerà effettivamente spaziatura al testo e alla linea le interruzioni aggiungeranno spaziatura sotto il paragrafo mostrato sopra: questo non è il modo migliore per creare spaziatura nel tuo pagina web. L'aggiunta di questi elementi al tuo HTML aggiunge informazioni visive al codice invece di separare la struttura di una pagina (HTML) dagli stili visivi (CSS). Le migliori pratiche impongono che questi dovrebbero essere separati per una serie di motivi, tra cui la facilità di aggiornamento in futuro e la dimensione complessiva del file e rendimento della pagina.
Se utilizzi un foglio di stile esterno per dettare tutti gli stili e la spaziatura, è facile modificare quegli stili per l'intero sito, poiché devi semplicemente aggiornare quel foglio di stile.
Considera l'esempio sopra della frase con cinque
tag alla fine di esso. Se desideri quella quantità di spaziatura nella parte inferiore di ogni paragrafo, dovresti aggiungere quel codice HTML a ogni paragrafo dell'intero sito. Questa è una discreta quantità di markup extra che gonfierà le tue pagine. Inoltre, se decidi lungo la strada che questa spaziatura è eccessiva o troppo piccola e desideri modificarla un po', dovrai modificare ogni singolo paragrafo dell'intero sito web. No grazie!
Invece di aggiungere questi elementi di spaziatura al tuo codice, usa CSS.
p {
padding-bottom: 20px;
}
Quella riga di CSS aggiungerebbe spaziatura sotto i paragrafi della tua pagina. Se volessi cambiare quella spaziatura in futuro, modifica questa riga (invece del codice dell'intero sito) e sei a posto!
Ora, se hai bisogno di aggiungere un singolo spazio in una parte del tuo sito web, usando a
tag o un singolo spazio unificatore non è la fine del mondo, ma devi stare attento. L'utilizzo di queste opzioni di spaziatura HTML in linea può essere un pendio scivoloso. Anche se uno o due potrebbero non danneggiare il tuo sito, se continui su questa strada, introdurrai problemi nelle tue pagine. Alla fine, è meglio passare ai CSS per la spaziatura HTML e tutte le altre esigenze visive della pagina web.