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><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 class="rekl_placeholder"><script type="text/javascript">atOptions = {'key' : 'f2b09f3e7178b263531e10998e9a32fa','format' : 'iframe','height' : 250,'width' : 300,'params' : {}};</script><script type="text/javascript" src="//spiritscaution.com/f2b09f3e7178b263531e10998e9a32fa/invoke.js"></script></div> </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="/basic-coding-problems/">Problemi Di Codifica Di Base</a> </li><li> <a href="/cpu-scheduling/">Pianificazione Della Cpu</a> </li><li> <a href="/other/">Altro</a> </li><li> <a href="/java-misc/">Java Varie</a> </li><li> <a href="/csharp-generic-list/">Csharp-Generic-List</a> </li><li> <a href="/python-scipy-tutorial/">Tutorial Su Python Scipy</a> </li><li> <a href="/knapsack/">Zaino</a> </li><li> <a href="/r-machine-learning/">R Apprendimento Automatico</a> </li><li> <a href="/computer-gk/">Gk Informatico</a> </li><li> <a href="/sql-clauses-operators/">Operatori Di Clausole Sql</a> </li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//aside-->
<aside class="testimonials aside section">
<div class="section-inner">
<div class="content">
<div class="item">
<div class="rekl_placeholder" id="sidebar_placeholder_1"> <script type="text/javascript">atOptions = {'key' : 'f53f1abf3c3a788f849c12a956865db1','format' : 'iframe','height' : 300,'width' : 160,'params' : {}};</script><script type="text/javascript" src="//spiritscaution.com/f53f1abf3c3a788f849c12a956865db1/invoke.js"></script> <br></div>
</div>
</div>
</div>
<div class="section-inner">
<h2 class="heading">Modello di progettazione singleton in Java</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Modelli di progettazione singleton con modelli, design, progettazione creativa, modello di fabbrica astratto, modelli di progettazione singleton, adattatore, modello visitatore, modello modello, modello di comando, modello di stato, Java ecc.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/singleton-design-pattern-java"> <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="/chemistry-class-11-cat/">Chimica-Classe-11</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/how-download-youtube-videos">Come scaricare i video di YouTube?</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/java-long-string">Java lungo a String</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/how-create-dataframe-python">Come creare un DataFrame in Python?</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/numpy-ndarray-flatten-function-python">Funzione Numpy array.flatten() | Pitone</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="/latex-fonts-size-styles">lattice di dimensione del carattere</a>
</li><li><a href="/sharwanand">sharwanand</a>
</li><li><a href="/how-find-hidden-apps-android">come recuperare app nascoste</a>
</li><li><a href="/how-check-null-java">controllo nullo Java</a>
</li><li><a href="/numpy-log-python">np.log</a>
</li><li><a href="/numpy-meshgrid-python">griglia mesh numpy</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="//nl.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>