En aquest article, aprendrem a afegir espais/tabulacions al text utilitzant HTML i CSS . Com que sabem que HTML no admet més d'un espai per defecte, per això necessitem alguns atributs addicionals o CSS per obtenir espai addicional entre el text.
Aquests són els enfocaments següents mitjançant aquests, podem afegir espais/tabulacions al text:
Taula de contingut
- Ús de les entitats HTML
- Utilitzant la propietat de la mida de la pestanya en CSS
- Utilitzant CSS personalitzat
Ús de les entitats HTML
- El L'entitat de caràcter s'utilitza per indicar un espai no trencador que és un espai fix. Això es pot percebre com el doble de l'espai d'un espai normal. S'utilitza per crear un espai en una línia que no es pot trencar mitjançant l'ajust de lletra.
- El L'entitat de caràcter s'utilitza per indicar un espai 'en' que significa la mida de mig punt de la font actual. Això es pot percebre com el doble de l'espai d'un espai normal.
- El L'entitat de caràcters s'utilitza per indicar un espai 'em', que significa igual a la mida en punts de la font actual. Això es pot percebre com a quatre vegades l'espai d'un espai normal.
Sintaxi
// Regular space // Two spaces gap // Four spaces gap>
Exemple: En aquest exemple, veurem com utilitzar els espais i, si us plau, no us oblideu d'afegir , , i &emsp al codi on cal afegir espai entre el text.
html Com inserir espais/tabulacions al text mitjançant HTML/CSS? títol> cap> <body> <h1 style='color: green'>techcodeview.comh1> <b>Com inserir espais/tabulacions al text mitjançant HTML/CSS?b><p>Aquest és un espai normal.p><p>Aquest és un buit de dos espais.p><p>Aquest és un quatre espais gap.p> cos> html>></pre> </code> <p dir='ltr'> <b> <strong>Sortida:</strong> </b> </p> <br /> <div id="container-4ae8242bd8e42d94c5c0bf390d5144e6"></div><br /><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/java-do-while-loop">java fer mentre</a>
</blockquote> <img src='//techcodeview.com/img/css-questions/66/how-insert-spaces-tabs-text-using-html.webp' alt="entitats de caràcter"><h2 id='using-the-tabsize-property-in-css'> <b> <strong>Utilitzant la propietat de la mida de la pestanya en CSS</strong> </b> </h2><p dir='ltr'><span>El</span> <span>propietat de la mida de la pestanya en CSS</span> <span>s'utilitza per establir el nombre d'espais a cada caràcter de tabulació que es mostrarà. Canviar aquest valor permet inserir la quantitat d'espai necessària en un caràcter de tabulació. Tanmateix, aquest mètode només funciona amb text preformatat (utilitzant</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>Com inserir espais/tabulacions al text mitjançant HTML/CSS? títol><style>.tab1 { mida de la pestanya: 2; } .tab2 { mida de la pestanya: 4; } .tab4 { mida de la pestanya: 8; } estil> cap> <body> <h1 style='color: green'>techcodeview.comh1> <b>Com inserir espais/tabulacions al text mitjançant HTML/CSS?b><pre class='hljs'zalupa>Aquesta és una pestanya amb 2 espais.pre><pre class='hljs'zalupa>Aquesta és una pestanya amb 4 espais.pre><pre class='hljs'zalupa>Aquesta és una pestanya amb 8 espais.pre> cos> html> Sortida: Ús de CSS personalitzat Es pot crear una classe nova que proporcioni una certa quantitat d'espaiat utilitzant la propietat margin-left. La quantitat d'espai podria estar donada pel nombre de píxels especificat en aquesta propietat. La propietat de visualització també s'estableix en 'inline-block' de manera que no s'afegeix cap salt de línia després de l'element. Això permet que l'espai estigui al costat del text i altres elements. Sintaxi .tab { display: inline-block; marge-esquerra: valor; /* per exemple: valor = 40px*/ } Exemple: En aquest exemple, implementarem el mètode explicat anteriorment. html<html> <head> <title>Com inserir espais/tabulacions al text mitjançant HTML/CSS? títol><style>.tab { visualització: bloc en línia; marge esquerre: 40 píxels; } estil> cap> <body> <h1 style='color: green'>techcodeview.comh1> <b>Com inserir espais/tabulacions al text mitjançant HTML/CSS?b><p>Això és un<span>span>espai de tabulació al document.p> cos> html> Sortida:></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="/information-security/">Seguretat De La Informació</a> </li><li> <a href="/java-new-features/">Noves Funcions De Java</a> </li><li> <a href="/cyber-security/">Seguretat Cibernètica</a> </li><li> <a href="/merge-sort/">Fusionar Ordenar</a> </li><li> <a href="/tally-tutorial/">Tutorial De Tally</a> </li><li> <a href="/python-dictionary-programs/">Diccionari Python-Programes</a> </li><li> <a href="/ds-tutorial/">Tutorial Ds</a> </li><li> <a href="/jdbc/">Jdbc</a> </li><li> <a href="/prolog-tutorial/">Tutorial Pròleg</a> </li><li> <a href="/splunk-tutorial/">Tutorial De Splunk</a> </li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//aside-->
<aside class="testimonials aside section">
<div class="section-inner">
<h2 class="heading">Com prendre entrada a Python?</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Com prendre entrada a Python amb Python, tutorial, tkinter, botó, visió general, entrada, botó de verificació, llenç, marc, configuració de l'entorn, primer programa Python, conceptes bàsics, tipus de dades, operadors, etc.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/how-take-input-python"> <i class="fa fa-external-link"></i> Llegir Més</a> </p>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="languages aside section">
<div class="section-inner">
<h2 class="heading">Articles D'Interès</h2>
<div class="content">
<ul class="list-unstyled">
<li class="item">
<span class="title"> <strong> <a href="/shell/">Shell</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/javascript-methods/">Javascript-Mètodes</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/segmentation-fault-c">Falla de segmentació en C</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/how-get-2-decimal-places-python">Com obtenir 2 decimals a Python</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/bubble-sort-python">Ordenació de bombolles en Python</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">Entrades Populars</h2>
<div class="content">
<ul class="list"> <li><a href="/masons-gain-formula">fórmula de paleta</a>
</li><li><a href="/c-basic-input-output">cout</a>
</li><li><a href="/difference-between-csma-ca">csma i csma cd</a>
</li><li><a href="/swapping-operating-system">intercanvi de memòria</a>
</li><li><a href="/how-enable-disable-developer-options-android">desactiva el mode de desenvolupador</a>
</li><li><a href="/java-stream-filter">flux de filtre 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 Tots Els Drets Reservats | <a href="//bg.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Exempció De Responsabilitat</a> | <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Sobre Nosaltres</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Política De Privadesa</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>