Come creare spazio in più in HTML o in una pagina web

La creazione di spazio aggiuntivo nel tuo HTML su una pagina Web può essere ottenuta in molti modi, a seconda del tipo di spazio che desideri creare. Le seguenti sezioni contengono molti dei diversi modi per creare spazio aggiuntivo utilizzando sia HTML che CSS.

Una delle cose più confuse per i nuovi utenti che stanno creando la propria pagina Web è che non possono premere più volte la barra spaziatrice per creare spazi aggiuntivi. Per creare spazi aggiuntivi prima, dopo o tra il testo, utilizzare il comando (spazio non temporaneo) carattere HTML esteso.

Ad esempio, con "spazio extra" abbiamo il seguente codice nel nostro codice HTML.

 spazio extra 

Nota: se si utilizza un editor WYSIWYG per immettere il codice sopra, è necessario essere nella scheda HTML o modificare il codice HTML.

  • Elenco completo di caratteri HTML speciali estesi.

Mantieni la spaziatura nel testo che viene incollato in una pagina

Se stai incollando del testo con spazi o tabulazioni, puoi usare l'HTML

 tag per mantenere il testo formattato. Di seguito è riportato un esempio di come incollare il testo con spazi aggiuntivi utilizzando il 
 etichetta.

 Questo testo ha molti spazi 

L'esempio sopra è fatto usando il codice HTML sotto.

 Questo testo ha molti spazi 

Nota: se si utilizza un editor WYSIWYG per inserire il codice sopra, è necessario essere nella scheda HTML o modificare il codice HTML.

  • Vedi il nostro HTML
     pagina di tag per ulteriori informazioni su questo tag.

Creare ulteriore spazio attorno a un elemento o oggetto

Qualsiasi elemento HTML può avere spaziatura aggiuntiva aggiunta in alto, a destra, in basso o a sinistra. Tuttavia, è importante comprendere la differenza tra margine e riempimento prima di decidere quale tipo di spazio si desidera aggiungere attorno all'elemento o ad un altro oggetto. Come puoi vedere nell'immagine qui sotto, il padding è ciò che circonda immediatamente l'elemento, all'interno del bordo e il margine esterno al bordo.

Nell'esempio seguente, il nostro paragrafo è circondato da un bordo, rientrato con un margine e ha spazio a destra e in fondo al paragrafo.

Un esempio di un paragrafo con margine e riempimento.

L'esempio sopra è stato creato usando il codice qui sotto.

Esempio di un paragrafo con margine e riempimento.

Nella prima sezione del codice, "margin-left: 2.5em;" aggiunge un margine sinistro di 2, 5 em, che dà l'aspetto del testo rientrato. Come mostrato nell'esempio, questa spaziatura è al di fuori del bordo. Nella prossima sezione, "padding: 0 7em 2em 0;" sta definendo il padding superiore, destro, inferiore e sinistro (orario). Ci sono "0" padding superiore, "7em" imbottitura destra, "2em" imbottitura inferiore e 0 imbottitura sinistra. Il resto di questo esempio sta definendo come dovrebbe apparire il bordo.

Creare una scheda usando CSS e HTML

Una scheda può essere creata in HTML regolando il margine sinistro di un elemento. Ad esempio, questo paragrafo ha un margine sinistro di 2, 5 em dall'elemento che contiene il testo. Il CSS per creare questo margine sinistro è mostrato sotto.

 .tab {margin-left: 2.5em} 

Dopo aver inserito questo codice nel nostro file CSS, possiamo applicare la classe "tab" a qualsiasi testo per creare l'aspetto di una scheda. Il valore del margine sinistro può essere aumentato o diminuito a seconda delle esigenze.

Sebbene raccomandiamo il metodo di cui sopra, il CSS margin-left può anche essere aggiunto in linea come mostrato nell'esempio seguente.

Un esempio di margine sinistro di 5em.

Un esempio di margine sinistro di 5em.

  • Come faccio a indentare o tab testo sulla mia pagina web o in HTML?

Se è necessario aggiungere ulteriore spazio sotto una linea o un paragrafo di testo e deve solo farlo una volta, è possibile utilizzare il comando

tag per aggiungere ulteriore spazio in un documento. Di seguito è riportato un esempio di come questa tecnica può essere applicata.

Questa frase contiene un testo di esempio.

Come puoi vedere, sono state aggiunte due pause per creare lo spazio sopra.

Il codice sopra creerà il testo mostrato di seguito.

Questa frase contiene un testo di esempio.

Come puoi vedere, sono state aggiunte due pause per creare lo spazio sopra.

Ulteriori interruzioni possono essere aggiunte se necessario. Tuttavia, ti suggeriamo di utilizzare il metodo CSS menzionato in precedenza per aggiungere padding e spaziatura attorno al testo se eseguito in più punti di una pagina.