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><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 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="/excel-how/">Excel-Com</a> </li><li> <a href="/react-questions/">Reaccionar-Preguntes</a> </li><li> <a href="/c-functions/">C-Funcions</a> </li><li> <a href="/chemical-compounds/">Compostos Químics</a> </li><li> <a href="/alternatives/">Alternatives</a> </li><li> <a href="/coordinate-geometry/">Geometria De Coordenades</a> </li><li> <a href="/java-timer-class/">Classe De Temporitzador De Java</a> </li><li> <a href="/genetics/">Genètica</a> </li><li> <a href="/sql-functions/">Sql-Funcions</a> </li><li> <a href="/chemistry-difference-between/">Química-Diferència-Entre</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">Què significa Core i5 a l'ordinador?</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Què significa Core i5 a l'ordinador amb una explicació del dispositiu d'entrada, dispositiu de sortida, memòria, CPU, placa base, xarxa informàtica, virus, programari, maquinari, etc.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/what-is-core-i5-meaning-computer"> <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="/boto3-python-module">Mòdul Boto3 Python</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/how-say-hello-30-different-languages-1311478">Com dir hola en 30 idiomes diferents</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/modulenotfounderror-no-module-named-cv2-python">Modulenotfounderror: cap mòdul anomenat 'CV2' a Python</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/how-switch-youtube-safety-mode-242100">Com activar el mode de seguretat de YouTube</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/physics-class-10-cat/">Física-Classe-10</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="/alphabet-numbers">numerar l'alfabet</a>
</li><li><a href="/run-command-linux">comanda d'execució de linux</a>
</li><li><a href="/inheritance-java">herència en java</a>
</li><li><a href="/myflixer-alternatives">el meu flixer</a>
</li><li><a href="/best-hentai-anime">els 10 millors hentai</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="//sr.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>