La creazione di spazio extra in HTML su una pagina web può essere ottenuta in molti modi a seconda del tipo di spazio che si desidera creare. Le sezioni seguenti contengono molti dei diversi modi per creare spazio extra utilizzando sia HTML che CSS.,
Creazione di spazi aggiuntivi prima o dopo il testo
Una delle cose più confuse per i nuovi utenti che stanno creando una 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 carattere HTML esteso (spazio senza interruzioni).
Ad esempio, con “spazio extra” abbiamo il seguente codice nel nostro HTML.,
extra space
Se si utilizza un editor WYSIWYG per inserire il codice di cui sopra, è necessario essere nella scheda HTML o modificare il codice HTML.
Per un elenco di caratteri HTML speciali estesi, vedere: Elenco completo dei caratteri HTML speciali estesi.
Mantieni la spaziatura nel testo incollato in una pagina
Se stai incollando del testo con spazi o tabulazioni extra, puoi usare il tag HTML<pre > per mantenere il testo formattato., Di seguito è riportato un esempio di come incollare testo con spazi aggiuntivi utilizzando il tag <pre>.
This text has lots of spaces
L’esempio sopra è fatto usando il seguente codice HTML.
<pre class="tab">This text has lots of spaces</pre>
- Vedere il nostro HTML<pre > tag pagina per ulteriori informazioni su questo tag.
Se si utilizza un editor WYSIWYG per inserire il codice di cui sopra, è necessario essere nella scheda HTML o modificare il codice HTML.,
Creare spazio extra attorno a un elemento o un oggetto
Qualsiasi elemento HTML può avere spaziatura aggiuntiva aggiunta in alto, a destra, in basso o a sinistra. Tuttavia, assicurati di comprendere la differenza tra margine e riempimento prima di decidere il tipo di spazio che desideri aggiungere attorno all’elemento o all’oggetto. Come si vede nell’immagine qui sotto, padding circonda l’elemento, all’interno del bordo, e il margine al di fuori del bordo.
L’esempio seguente mostra il nostro paragrafo circondato da un bordo, rientrato con un margine e con spaziatura a destra e in basso.,
Un esempio di paragrafo con margine e padding.
L’esempio sopra è stato creato usando il codice qui sotto.
Nella prima sezione del codice, “margin-left: 2.5 em;” aggiunge un margine sinistro di 2.5 em, che dà l’aspetto di testo rientrato. Come mostrato nell’esempio, questa spaziatura è al di fuori del bordo. Nella sezione successiva, “padding: 0 7em 2em 0;” sta definendo il padding superiore, destro, inferiore e sinistro (in senso orario). C’è “0” top padding, “7em” right padding, ” 2em ” bottom padding e 0 left padding., Il resto di questo esempio sta definendo come dovrebbe apparire il bordo.
Creazione di una scheda utilizzando 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 contenente il testo. Il CSS per creare questo margine sinistro è mostrato di seguito.
.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-sinistra può essere aumentato o diminuito a seconda delle esigenze.,
Sebbene raccomandiamo il metodo sopra, il CSS a margine sinistro può anche essere aggiunto in linea come mostrato nell’esempio seguente.
<p style="margin-left:2.5em">An example of a 5em left margin.</p>
Un esempio di margine sinistro di 5em.
- Come faccio a indentare o tabulare il testo sulla mia pagina web o in HTML?
Aggiungi spazio sotto una riga o un paragrafo di testo
Se devi aggiungere spazio extra sotto una riga o un paragrafo di testo e devi farlo solo una volta, puoi usare il tag<br>. Di seguito è riportato un esempio di come questa tecnica può essere applicata.,
<p>This sentence contains example text.<br><br>As you can see, two breaks add the space above.</p>
Il codice qui sopra crea il testo mostrato di seguito.
Questa frase contiene un testo di esempio.
Come puoi vedere, due pause aggiungono lo spazio sopra.
È possibile aggiungere ulteriori interruzioni se necessario. Tuttavia, suggeriamo di utilizzare il metodo CSS menzionato in precedenza per aggiungere padding e spaziatura attorno al testo se viene eseguito in più punti di una pagina.
Ulteriori informazioni
- Come allineare il testo su una pagina web in HTML o CSS.
- Come creare un testo HTML non formattato.
- Vedi la nostra definizione di spazio bianco per ulteriori informazioni e link correlati.,
- HTML e web design aiuto e supporto.
