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="/python-function-programs/">Programes-Funcions Python</a> </li><li> <a href="/binary-tree/">Arbre Binari</a> </li><li> <a href="/technical-scripter-2022-cat/">Scripter Tècnic 2022</a> </li><li> <a href="/temples/">Temples</a> </li><li> <a href="/c-library/">C-Biblioteca</a> </li><li> <a href="/definitions-meanings/">Definicions I Significats</a> </li><li> <a href="/kali-linux-tutorial/">Tutorial Kali Linux</a> </li><li> <a href="/linux/">Linux</a> </li><li> <a href="/misc/">Nit</a> </li><li> <a href="/spring-boot-tutorial/">Tutorial D'arrencada De Primavera</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">Països que comencen per Z</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Hi ha dos països al món que comencen amb la lletra 'Z': 1. Zàmbia; 2. Zimbabwe. Zàmbia, situada al sud d'Àfrica, és coneguda per la seva fauna diversa, les seves vastes zones salvatges i les cascades Victòria. Es va independitzar del domini colonial britànic el 1964 i des de llavors s'ha convertit en una democràcia multipartidista.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/countries-that-start-with-z"> <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="/ceil-floor-functions-c">Funcions de sostre i sòl en C++</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/sql-delete-table">SQL SUPRIM LA TAULA</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/genetics/">Genètica</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/what-is-average-sat-score-1311458">Quina és la puntuació mitjana del SAT?</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/salesforce-tutorial">Tutorial de Salesforce</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="/maven-repository">repositori maven</a>
</li><li><a href="/examples-search-engines">cercador i exemples</a>
</li><li><a href="/roman-number-1-100">1 a 100 roman núm</a>
</li><li><a href="/types-sql-join">tipus d'unions en rdbms</a>
</li><li><a href="/json-example">exemple de dades json</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="//tr.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>