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 "compressione spazio bianco". se si digita 1 spazio o 100 nel codice HTML, il browser Web collassa automaticamente tali spazi in 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 gli spazi bianchi in HTML che appaiono sulla pagina web? Questo articolo esamina alcuni dei diversi modi.
Spazi in HTML con CSS
Il modo migliore per aggiungere spazi nel codice HTML è con Cascading Style Sheets (CSS). I CSS dovrebbero essere usati per aggiungere qualsiasi aspetto visivo di una pagina web, e dato che la spaziatura fa parte delle caratteristiche di visual design di una pagina, il CSS è dove vuoi che questo venga fatto.
Nei CSS, puoi usare 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 di fronte a tutti i tuoi paragrafi. Aggiungi il seguente CSS al tuo foglio di stile interno o esterno:
p {text-indent: 3em;} Se si desidera aggiungere uno o due spazi aggiuntivi al testo, è possibile utilizzare lo spazio non interruzione. Questo personaggio agisce proprio come un carattere di spazio standard, solo che non collassa 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 Usa l'HTML: Questo testo ha cinque spazi extra al suo interno Puoi anche usare il Questa frase ha cinque interruzioni di riga alla fine Sebbene queste opzioni funzionino entrambe: l'elemento spazi non interrotti aggiungerà effettivamente spaziatura al testo e le interruzioni di riga aggiungeranno spaziatura al di sotto del paragrafo mostrato sopra - questo non è il modo migliore per creare spaziature nella tua pagina web. L'aggiunta di questi elementi al codice HTML aggiunge informazioni visive al codice invece di separare la struttura di una pagina (HTML) dagli stili visivi (CSS). Le best practice impongono che queste siano separate per una serie di motivi, tra cui la facilità di aggiornamento in futuro e le dimensioni generali del file e il rendimento della pagina. Se si utilizza un foglio di stile esterno per dettare tutti gli stili e la spaziatura, è facile cambiare gli stili per l'intero sito, poiché è sufficiente aggiornare quel foglio di stile. Considera l'esempio sopra della frase con cinque Invece di aggiungere questi elementi di spaziatura al tuo codice, usa CSS. p {imbottitura-fondo: 20px;} Quella riga di CSS aggiungerebbe spaziatura sotto i paragrafi della tua pagina. Se vuoi modificare quella spaziatura in futuro, modifica questa riga (anziché il codice dell'intero sito) e sei a posto! Ora, se è necessario aggiungere un singolo spazio in una parte del sito Web, utilizzando a Spazi in HTML: all'interno del tuo testo
tag per aggiungere ulteriori interruzioni di riga.
Perché spaziatura in HTML è una cattiva idea
tag alla fine di esso. Se si desidera la quantità di spaziatura in fondo a ogni paragrafo, è necessario aggiungere tale codice HTML a ogni paragrafo dell'intero sito. Questa è una buona quantità di markup extra che gonfierà le tue pagine. Inoltre, se decidi che questa spaziatura è troppo o troppo piccola e desideri modificarla un po ', dovrai modificare ogni singolo paragrafo dell'intero sito web. No grazie!
tag o un singolo spazio non-rottura non è la fine del mondo, ma devi stare attento. L'utilizzo di queste opzioni di spaziatura HTML inline può essere una pendenza scivolosa. Mentre uno o due potrebbero non danneggiare il tuo sito, se continui su questa strada, introdurrai problemi nelle tue pagine. Alla fine, è meglio passare al CSS per la spaziatura HTML e tutte le altre esigenze visive della pagina web.
