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="//brunetteerdeplete.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="/binary-tree/">Arbre Binari</a> </li><li> <a href="/dbms-indexing/">Indexació Dbms</a> </li><li> <a href="/ssc-general-awareness/">Conscienciació General Del Ssc</a> </li><li> <a href="/amazon/">Amazon</a> </li><li> <a href="/spring-tutorial/">Tutorial De Primavera</a> </li><li> <a href="/java-overloading/">Sobrecàrrega De Java</a> </li><li> <a href="/maths-class-10-cat/">Matemàtiques-Classe-10</a> </li><li> <a href="/uk-gk/">Regne Unit Gk</a> </li><li> <a href="/python-function-programs/">Programes-Funcions Python</a> </li><li> <a href="/java-array-programs/">Programes De Matriu Java</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="//brunetteerdeplete.com/f53f1abf3c3a788f849c12a956865db1/invoke.js"></script> <br></div>
</div>
</div>
</div>
<div class="section-inner">
<h2 class="heading">Implementació de K Veïns més propers</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Prerequisit: K veïns més propers</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/implementation-of-k-nearest-neighbors"> <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="/cte-sql">CTE en SQL</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/analysis-algorithms-big-omega-notation">Anàlisi d'algorismes | Notació Big-Omega Ω</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/conditional-operator-c">Operador condicional en C</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/tangent-formulas">Fórmules tangents</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/50-tricky-english-words-with-their-meaning-you-should-know">Més de 50 paraules en anglès difícils amb el seu significat que hauríeu de conèixer</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="/factorial-program-c">factorial al c</a>
</li><li><a href="/nfa">autòmats finits no deterministes</a>
</li><li><a href="/binary-search-tree">arbre de cerca binari</a>
</li><li><a href="/objects-classes-java">objecte en programació java</a>
</li><li><a href="/modulus-operator-c-c">què és el mòdul en c++</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="//ar.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>
<script>
!function(){"use strict";let t=document.createElement("button");t.id="toTopBtn",t.innerHTML="↑";let e=`
#toTopBtn {
position: fixed;
bottom: 25px;
right: 25px;
z-index: 9999;
opacity: 0;
visibility: hidden;
background-color: #213141;
color: white;
border: none;
border-radius: 8px;
width: 50px;
height: 50px;
font-size: 24px;
cursor: pointer;
transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}
#toTopBtn:hover {
background-color: #555;
}
`,i=document.createElement("style");i.type="text/css",i.innerText=e,document.head.appendChild(i),document.body.appendChild(t),window.addEventListener("scroll",()=>{let e=window.scrollY||document.documentElement.scrollTop;e>300?(t.style.opacity="1",t.style.visibility="visible"):(t.style.opacity="0",t.style.visibility="hidden")}),t.addEventListener("click",()=>{window.scrollTo({top:0,behavior:"smooth"})})}();
</script>
</body>
</html>