In questo articolo impareremo come aggiungere spazi/tabulazioni nel testo utilizzando HTML E CSS . Come sappiamo, l'HTML non supporta più di uno spazio per impostazione predefinita, ecco perché abbiamo bisogno di alcuni attributi o CSS aggiuntivi per ottenere spazio extra tra il testo.
Questi sono i seguenti approcci: utilizzandoli possiamo aggiungere spazi/tabulazioni nel testo:
Tabella dei contenuti
Utilizzo delle entità HTML
- IL l'entità carattere viene utilizzata per denotare uno spazio unificatore che è uno spazio fisso. Questo può essere percepito come il doppio dello spazio di uno spazio normale. Viene utilizzato per creare uno spazio in una riga che non può essere interrotto dal ritorno a capo automatico.
- IL l'entità carattere viene utilizzata per denotare uno spazio 'en' che significa la dimensione di mezzo punto del carattere corrente. Questo può essere percepito come il doppio dello spazio di uno spazio normale.
- IL l'entità carattere viene utilizzata per denotare uno spazio 'em' che significa uguale alla dimensione in punti del carattere corrente. Questo può essere percepito come quattro volte lo spazio di uno spazio normale.
Sintassi
// Regular space // Two spaces gap // Four spaces gap>
Esempio: In questo esempio, vedremo come utilizzare gli spazi e per favore non dimenticare di aggiungere, e &emsp nel codice in cui è necessario aggiungere spazio tra il testo.
html Come inserire spazi/tabulazioni nel testo utilizzando HTML/CSS? titolo> testa> <body> <h1 style='color: green'>techcodeview.comh1> <b>Come inserire spazi/tabulazioni nel testo utilizzando HTML/CSS?b><p>Questo è uno spazio normale.p><p>Questo è uno spazio di due spazi.p><p>Questo è un gap di quattro spazi.p> body> html>></pre> </code> <p dir='ltr'> <b> <strong>Produzione:</strong> </b> </p> <br /> <div id="container-4ae8242bd8e42d94c5c0bf390d5144e6"></div><br /><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/java-list">elenca Java</a>
</blockquote> <img src='//techcodeview.com/img/css-questions/66/how-insert-spaces-tabs-text-using-html.webp' alt="entità-char"><h2 id='using-the-tabsize-property-in-css'> <b> <strong>Utilizzo della proprietà delle dimensioni della scheda nei CSS</strong> </b> </h2><p dir='ltr'><span>IL</span> <span>proprietà della dimensione della scheda nei CSS</span> <span>viene utilizzato per impostare il numero di spazi visualizzati su ciascun carattere di tabulazione. La modifica di questo valore consente di inserire la quantità di spazio necessaria su un carattere di tabulazione. Questo metodo tuttavia funziona solo con testo preformattato (utilizzando</span></p><pre class='hljs'> tags). The tab character can be inserted by holding the Alt and pressing 0 and 9 together. Syntax .tab { tab-size: value; /* for e.g: value = 2*/ } Example: In this example, we are going to implement the above-explained method. html <html> <head> <title>Come inserire spazi/tabulazioni nel testo utilizzando HTML/CSS? titolo><style>.tab1 { dimensione scheda: 2; } .tab2 { dimensione scheda: 4; } .tab4 { dimensione tab: 8; } stile> testa> <body> <h1 style='color: green'>techcodeview.comh1> <b>Come inserire spazi/tabulazioni nel testo utilizzando HTML/CSS?b><pre class='hljs'zalupa>Questa è una scheda con 2 spazi.pre><pre class='hljs'zalupa>Questa è una scheda con 4 spazi.pre><pre class='hljs'zalupa>Questa è una scheda con 8 spazi.pre> body> html> Output: utilizzo di CSS personalizzati È possibile creare una nuova classe che fornisce una certa quantità di spaziatura utilizzando la proprietà margin-left. La quantità di spazio potrebbe essere data dal numero di pixel specificati in questa proprietà. Anche la proprietà display è impostata su 'inline-block' in modo che non venga aggiunta alcuna interruzione di riga dopo l'elemento. Ciò consente allo spazio di sedersi accanto al testo e ad altri elementi. Sintassi .tab { display: inline-block; margine sinistro: valore; /* per es: valore = 40px*/ } Esempio: In questo esempio, implementeremo il metodo sopra spiegato. html<html> <head> <title>Come inserire spazi/tabulazioni nel testo utilizzando HTML/CSS? titolo><style>.tab { display: blocco in linea; margine sinistro: 40px; } stile> testa> <body> <h1 style='color: green'>techcodeview.comh1> <b>Come inserire spazi/tabulazioni nel testo utilizzando HTML/CSS?b><p>Questo è un<span>span>tab spazio nel documento.p> body> html> Output:></pre></article>
</div><!--//content-->
</div><!--//section-inner-->
</section><!--//section-->
</div><!--//primary-->
<div class="secondary col-md-4 col-sm-12 col-xs-12">
<aside class="info aside section">
<div class="section-inner">
<h2 class="">Categoria</h2>
<div class="content">
<ul class="list-unstyled">
<li> <a href="/vb-net-tutorial/">Esercitazione Su Vb.net</a> </li><li> <a href="/python-sys/">Python-Sys</a> </li><li> <a href="/geometric-lines/">Linee Geometriche</a> </li><li> <a href="/c-input-output-quiz/">Quiz Su Input E Output C</a> </li><li> <a href="/math-concepts/">Concetti Matematici</a> </li><li> <a href="/circular-linked-list/">Elenco Collegato Circolare</a> </li><li> <a href="/t-sql-tutorial/">Esercitazione Su Tsql</a> </li><li> <a href="/image-tools/">Strumenti Per Immagini</a> </li><li> <a href="/rxjs-tutorial/">Esercitazione Su Rxjs</a> </li><li> <a href="/java-files/">File Java</a> </li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//aside-->
<aside class="testimonials aside section">
<div class="section-inner">
<h2 class="heading">SetAttributo JavaScript()</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> JavaScript setAttribute() con tutorial javascript, introduzione, javascript oops, applicazione di javascript, loop, variabile, oggetti, mappa, typedarray ecc.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/javascript-setattribute"> <i class="fa fa-external-link"></i> Per Saperne Di Più</a> </p>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="languages aside section">
<div class="section-inner">
<h2 class="heading">Articoli Interessanti</h2>
<div class="content">
<ul class="list-unstyled">
<li class="item">
<span class="title"> <strong> <a href="/what-is-windows-desktop">Cos'è il file desktop.ini di Windows e posso eliminarlo?</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/shell-sort-algorithm">Algoritmo di ordinamento della shell</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/countries-that-start-with-d">I paesi che iniziano con D</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/difference-between-cryptography">Differenza tra crittografia e crittografia</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/java-math-random-method">Metodo Java Math random()</a> </strong> </span>
</li><!--//item-->
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="list music aside section">
<div class="section-inner">
<h2 class="heading">Messaggi Popolari</h2>
<div class="content">
<ul class="list"> <li><a href="/add-elements-array-java">Java aggiunge a un array</a>
</li><li><a href="/javascript-global-variable">variabile javascript globale</a>
</li><li><a href="/gimp-fonts">elenco dei caratteri gimp</a>
</li><li><a href="/java-string-equals">.è uguale a Java</a>
</li><li><a href="/java-convert-boolean-string">booleano in stringa java</a>
</li><li><a href="/interface-java">interfaccia in Java</a>
</li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
</div><!--//secondary-->
</div><!--//row-->
</div><!--//masonry-->
<footer class="footer">
<div class="container text-center">
<span>
Copyright ©2025 Tutti I Diritti Riservati | <a href="//de.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Disclaimer</a> | <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Chi Siamo</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Politica Sulla Riservatezza</a> </span>
</div>
</footer>
<script type="text/javascript" src="https://techcodeview.com/template/assets/plugins/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="https://techcodeview.com/template/assets/plugins/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://techcodeview.com/template/assets/js/main.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js"></script>
</body>
</html>