Come creare spazio extra in HTML o una pagina web

0
58

Come creare spazio extra in HTML o in una pagina web

HTML

La creazione di spazio vuoto aggiuntivo nel codice 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.

Creare spazi extra prima o dopo il testo

Spazio infrangibile

Una delle cose più confuse per i nuovi utenti che stanno creando una pagina web è che non possono premere il pulsante barra spaziatrice più volte per creare spazi aggiuntivi. Per creare spazi extra prima, dopo o tra il testo, usa il   (spazio unificatore) carattere HTML esteso.

Ad esempio, con la frase “spazio extra” utilizzando un doppio spazio, abbiamo il seguente codice nel nostro HTML.

extra    space
Nota

Se stai utilizzando un editor WYSIWYG per inserire il codice sopra, devi essere nella scheda HTML o modificare il codice HTML.

Consiglio

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 utilizzare il tag HTML

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

This    text   has    lots of     spaces

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

<pre class="tab">This    text      has    lots of     spaces</pre>
  • Vedi la nostra pagina di tag HTML
     per ulteriori informazioni su questo tag.
Nota

Se stai utilizzando un editor WYSIWYG per inserire il codice sopra, devi essere nella scheda HTML o modificare il codice HTML.

Creare spazio extra attorno a un elemento o un oggetto

A qualsiasi elemento HTML può essere aggiunta una spaziatura aggiuntiva in alto, a destra, in basso o a sinistra. Tuttavia, assicurati di aver compreso la differenza tra margine e padding prima di decidere il tipo di spazio che desideri aggiungere attorno all'elemento o all'oggetto. Come mostrato nell'immagine sottostante, il riempimento circonda l'elemento, all'interno del bordo, e il margine all'esterno del bordo.

Imbottitura

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 utilizzando il codice seguente.

<p style="margin-left: 2.5em;padding: 0 7em 2em 0;border-width: 2px; border-color: black; border-style:solid;">Example of a paragraph with margin and padding.</p>

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

Creazione di una scheda utilizzando CSS e HTML

È possibile creare una scheda 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 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 sinistro può essere aumentato o diminuito a seconda delle tue esigenze.

Sebbene raccomandiamo il metodo sopra, il CSS con il 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 5 em.

  • 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 hai bisogno di aggiungere spazio extra sotto una riga o un paragrafo di testo e devi farlo solo una volta, puoi utilizzare il tag
. Di seguito è riportato un esempio di come può essere applicata questa tecnica.

<p>This sentence contains  example text.<br>
<br>
As you can see, two breaks add the space above.</p>

Il codice sopra crea il testo mostrato sotto.

Questa frase contiene un testo di esempio.

Come puoi vedere, due interruzioni aggiungono lo spazio sopra.

Se necessario, è possibile aggiungere ulteriori pause. Tuttavia, suggeriamo di utilizzare il metodo CSS menzionato in precedenza per aggiungere riempimento e spaziatura attorno al testo se eseguito in più punti di una pagina.

Aggiungi interlinea tra le righe di testo

La spaziatura tra le righe di testo può essere regolata aumentando e diminuendo l'altezza della riga utilizzando i CSS per rendere il testo più facile da leggere. Di seguito è riportato un esempio di interlinea extra aggiunta a un paragrafo di testo.

<p style="line-height:3.5em;">Text shown below with extra spacing</p>

Il codice sopra crea il testo mostrato sotto.

Questo testo di esempio è un esempio di come è possibile aggiungere al testo uno spazio extra tra le righe. Tuttavia, non raccomandiamo di utilizzare così tanto spazio di riga perché rende più difficile la lettura. Utilizziamo solo questa spaziatura tra le righe come esempio.

Nel nostro esempio sopra, abbiamo usato 3,5 em come altezza della linea per aiutare a enfatizzare la spaziatura tra le linee. Tuttavia, per la leggibilità, si consiglia di utilizzare circa 1.7em. L'aggiunta di una spaziatura aggiuntiva tra le righe migliora sempre la leggibilità del testo. Tuttavia, aggiungere troppo può rendere più difficile seguire e scansionare.