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="/bitwise-operators/">Operatori Bit A Bit</a> </li><li> <a href="/application-layer/">Livello Di Applicazione</a> </li><li> <a href="/bubblesort/">Bubblesort</a> </li><li> <a href="/sas-tutorial/">Esercitazione Sas</a> </li><li> <a href="/all-interview/">Tutte Le Interviste</a> </li><li> <a href="/interesting-facts/">Fatti Interessanti</a> </li><li> <a href="/math-concepts/">Concetti Matematici</a> </li><li> <a href="/csharp-generic-hashset/">Csharp-Generic-Hashset</a> </li><li> <a href="/java-8-cat/">Giava8</a> </li><li> <a href="/priority-queue/">Coda Prioritaria</a> </li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//aside-->
<aside class="testimonials aside section">
<div class="section-inner">
<h2 class="heading">Differenza tra l'ora della montagna e l'ora orientale</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> L'ora della montagna (MT) è due ore indietro rispetto all'ora della costa orientale (ET). Ciò significa che quando sono le 12:00 nel fuso orario della Montagna, sono le 14:00 nel fuso orario della costa orientale. Comprendere la differenza oraria tra questi due fusi orari è importante per coordinare programmi e appuntamenti tra diverse regioni.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/difference-between-mountain-time"> <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="/spring-vs-spring-boot-vs">Primavera contro Spring Boot contro Spring MVC</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/should-you-go-college-131232">Dovresti andare al college? 4 pro e 3 contro</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/file-handling-through-c-classes">Gestione dei file tramite classi C++</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/boolean-algebra">Algebra booleana</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/javac-is-not-recognized">javac non è riconosciuto</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="/java-convert-boolean-string">stringa booleana Java</a>
</li><li><a href="/java-collections-emptylist-method">elenco vuoto java</a>
</li><li><a href="/rajesh-khanna">Rajesh Khanna</a>
</li><li><a href="/how-read-csv-file-java">leggere da csv java</a>
</li><li><a href="/how-generate-random-number-between-1-10-c">numero casuale compreso tra 1 e 10</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="//ko.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>