Contenuto
- Crea spazi e separazione fisica degli elementi in HTML con CSS
- Spazi in HTML con CSS
- Spazi in HTML all'interno del testo
- Perché spaziare in HTML è una cattiva idea
Crea spazi e separazione fisica degli elementi in HTML con CSS
La creazione di spazi e la separazione fisica degli elementi in HTML può essere difficile da capire per il web designer principiante. Questo perché HTML ha una proprietà nota come "collasso di spazi bianchi". sia che tu digiti 1 spazio o 100 nel tuo codice HTML, il browser Web comprime automaticamente quegli spazi in un solo spazio. Ciò è 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 nella pagina Web che hai creato? Questo articolo esamina alcuni dei diversi modi.
Spazi in HTML con CSS
Il modo preferito per aggiungere spazi nel tuo HTML è con Cascading Style Sheets (CSS). Il CSS dovrebbe essere usato per aggiungere qualsiasi aspetto visivo di una pagina web e poiché la spaziatura fa parte delle caratteristiche del design visivo di una pagina, il CSS è dove vuoi che sia fatto.
In CSS, puoi utilizzare le proprietà margin o padding per aggiungere spazio attorno agli elementi. Inoltre, la proprietà di rientro del testo aggiunge spazio nella parte anteriore del testo, ad esempio per i rientri dei paragrafi.
Ecco un esempio di come utilizzare i CSS per aggiungere spazio davanti a tutti i tuoi paragrafi. Aggiungi il seguente CSS al tuo foglio di stile esterno o interno:
Spazi in HTML all'interno del testo
Se desideri solo aggiungere uno o due spazi aggiuntivi al testo, puoi utilizzare lo spazio non interrotto. Questo personaggio si comporta come un normale personaggio spaziale, 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 contiene cinque spazi extra al suo interno
Utilizza l'HTML:
Questo testo contiene cinque spazi extra al suo interno
Puoi anche usare il
tag per aggiungere ulteriori interruzioni di riga.
Questa frase ha cinque interruzioni di riga alla fine
Perché spaziare in HTML è una cattiva idea
Sebbene entrambe queste opzioni funzionino: l'elemento degli spazi non interrotti aggiungerà effettivamente la spaziatura al testo e le interruzioni di riga aggiungeranno la spaziatura sotto il paragrafo mostrato sopra, questo non è il modo migliore per creare la spaziatura nella tua pagina web. L'aggiunta di questi elementi al codice HTML aggiunge informazioni visive al codice anziché separare la struttura di una pagina (HTML) dagli stili visivi (CSS). Le migliori pratiche impongono che queste debbano essere separate per una serie di motivi, tra cui la facilità di aggiornamento in futuro e la dimensione complessiva del file e le prestazioni della pagina.
Se usi un foglio di stile esterno per dettare tutti i tuoi stili e la tua spaziatura, è facile farlo cambiando per l'intero sito, dato che 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 spazio nella parte inferiore di ogni paragrafo, dovrai aggiungere quel codice HTML a ogni paragrafo dell'intero sito. Questa è una buona dose di markup extra che gonfia le tue pagine. Inoltre, se decidi lungo la strada che questa spaziatura è troppo o troppo piccola e desideri cambiarla un po ', dovrai modificare ogni singolo paragrafo nell'intero sito web. No grazie!
Invece di aggiungere questi elementi di spaziatura al tuo codice, usa CSS.
p {
imbottitura inferiore: 20px;
}
Quella riga di CSS aggiungerebbe una spaziatura sotto i paragrafi della tua pagina. Se in futuro volessi cambiare quella spaziatura, modifica questa riga (anziché il codice dell'intero sito) e sei a posto!
Ora, se devi aggiungere un singolo spazio in una parte del tuo sito web, usando a
tag o un singolo spazio non-break non è la fine del mondo, ma devi stare attento. L'uso di queste opzioni di spaziatura HTML incorporate può essere una pendenza scivolosa. Mentre uno o due potrebbero non danneggiare il tuo sito, se continui su quel percorso, introdurrai problemi nelle tue pagine. Alla fine, è meglio passare a CSS per la spaziatura HTML e tutte le altre esigenze visive della pagina Web.
