În acest articol, vom învăța cum să adăugați spații/file în text folosind HTML și CSS . După cum știm că HTML nu acceptă mai mult de un spațiu în mod implicit, de aceea avem nevoie de câteva atribute suplimentare sau CSS pentru a obține spațiu suplimentar între text.
Acestea sunt următoarele abordări, folosind acestea, putem adăuga spații/file în text:
Cuprins
Utilizarea entităților HTML
- The entitatea de caracter este folosită pentru a desemna un spațiu neîntrerupt care este un spațiu fix. Acesta poate fi perceput ca de două ori mai mult decât spațiul unui spațiu normal. Este folosit pentru a crea un spațiu într-o linie care nu poate fi întrerupt prin împachetare cu cuvinte.
- The entitatea caracter este folosită pentru a desemna un spațiu „en”, ceea ce înseamnă dimensiunea de jumătate de punct a fontului curent. Acesta poate fi perceput ca de două ori mai mult decât spațiul unui spațiu normal.
- The entitatea caracter este folosită pentru a desemna un spațiu „em”, ceea ce înseamnă egal cu dimensiunea punctului fontului curent. Acesta poate fi perceput ca de patru ori mai mult decât spațiul unui spațiu normal.
Sintaxă
// Regular space // Two spaces gap // Four spaces gap>
Exemplu: În acest exemplu, vom vedea cum să folosim spațiile și vă rugăm să nu uitați să adăugați , , și &emsp în cod unde trebuie să adăugați spațiu între text.
html Cum se inserează spații/file în text folosind HTML/CSS? titlu> cap> <body> <h1 style='color: green'>techcodeview.comh1> <b>Cum să inserați spații/file în text folosind HTML/CSS?b><p>Acesta este un spațiu obișnuit.p><p>Acesta este un decalaj de două spații.p><p>Acesta este un cu patru spații gap.p> body> html>></pre> </code> <p dir='ltr'> <b> <strong>Ieșire:</strong> </b> </p> <br /> <div id="container-4ae8242bd8e42d94c5c0bf390d5144e6"></div><br /><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/first-java-program-hello-world-example">java salut lume</a>
</blockquote> <img src='//techcodeview.com/img/css-questions/66/how-insert-spaces-tabs-text-using-html.webp' alt="entități de caracter"><h2 id='using-the-tabsize-property-in-css'> <b> <strong>Utilizarea proprietății tab-size în CSS</strong> </b> </h2><p dir='ltr'><span>The</span> <span>proprietatea tab-size în CSS</span> <span>este folosit pentru a seta numărul de spații de pe fiecare caracter de filă care va fi afișat. Schimbarea acestei valori permite inserarea cantității necesare de spațiu pe un caracter de tab. Cu toate acestea, această metodă funcționează numai cu text preformatat (folosind</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>Cum se inserează spații/file în text folosind HTML/CSS? titlu><style>.tab1 { tab-size: 2; } .tab2 { tab-size: 4; } .tab4 { tab-size: 8; } stil> cap> <body> <h1 style='color: green'>techcodeview.comh1> <b>Cum să inserați spații/file în text folosind HTML/CSS?b><pre class='hljs'zalupa>Aceasta este o filă cu 2 spații.pre><pre class='hljs'zalupa>Aceasta este o filă cu 4 spații.pre><pre class='hljs'zalupa>Aceasta este o filă cu 8 spații.pre> corp> html> Ieșire: Utilizarea CSS personalizat Poate fi creată o nouă clasă care oferă o anumită cantitate de spațiere folosind proprietatea margin-left. Cantitatea de spațiu poate fi dată de numărul de pixeli specificat în această proprietate. Proprietatea de afișare este, de asemenea, setată la „inline-block”, astfel încât să nu fie adăugată nicio întrerupere de linie după element. Acest lucru permite spațiului să se așeze lângă text și alte elemente. Sintaxă .tab { display: inline-block; margine-stânga: valoare; /* de ex: valoare = 40px*/ } Exemplu: În acest exemplu, vom implementa metoda explicată mai sus. html<html> <head> <title>Cum se inserează spații/file în text folosind HTML/CSS? titlu><style>.tab { display: inline-block; margine-stânga: 40px; } stil> cap> <body> <h1 style='color: green'>techcodeview.comh1> <b>Cum să inserați spații/file în text folosind HTML/CSS?b><p>Acesta este un<span>span>spațiu de tab în document.p> body> html> Output:></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="">Categorie</h2>
<div class="content">
<ul class="list-unstyled">
<li> <a href="/operators/">Operatori</a> </li><li> <a href="/b-tree/">B-Tree</a> </li><li> <a href="/history-gk/">Istoria Gk</a> </li><li> <a href="/cryptography/">Criptografie</a> </li><li> <a href="/ansible-tutorial/">Tutorial Ansible</a> </li><li> <a href="/cpp-operator-overloading/">Cpp-Operator-Supraîncărcare</a> </li><li> <a href="/health-lifestyle/">Sănătate Și Stil De Viață</a> </li><li> <a href="/windows-errors/">Erori Windows</a> </li><li> <a href="/ai-ml-ds-with-r/">Ai-Ml-Ds Cu R</a> </li><li> <a href="/roman-numerals/">Numere Romane</a> </li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//aside-->
<aside class="testimonials aside section">
<div class="section-inner">
<h2 class="heading">Când este SAT octombrie? Ar trebui să-l iei?</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Te întrebi dacă SAT-ul din octombrie este potrivit pentru tine? Oferim data exactă SAT din octombrie și prezentăm avantajele și dezavantajele susținerii examenului respectiv.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/when-is-october-sat-131854"> <i class="fa fa-external-link"></i> Citeşte Mai Mult</a> </p>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="languages aside section">
<div class="section-inner">
<h2 class="heading">Articole Interesante</h2>
<div class="content">
<ul class="list-unstyled">
<li class="item">
<span class="title"> <strong> <a href="/cpp-operator-overloading/">Cpp-Operator-Supraîncărcare</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/python-pandas-apply">Python | Pandas.apply()</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/ssc-general-awareness/">Conștientizarea Generală A Ssc</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/ratio-manipulations-in-c-set-2-comparison">Manipulările raportului în C ++ | Setul 2 (comparație)</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/do-amish-have-dentists-1311188">Amish au stomatologi? Dinții lor sunt adesea răi?</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">Posturi Populare</h2>
<div class="content">
<ul class="list"> <li><a href="/java-list-node">nod listă java</a>
</li><li><a href="/what-is-full-form-supw">supw</a>
</li><li><a href="/arp-commands">arp - o comandă</a>
</li><li><a href="/instantiation-java">instanțierea java</a>
</li><li><a href="/java-string-format">șir java cu format</a>
</li><li><a href="/steps-write-execute-script">face executabil un script sh</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 Toate Drepturile Rezervate | <a href="//sv.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Declinare A Răspunderii</a> | <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Despre Noi</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Politica De Confidențialitate</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>