Î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><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 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="">Categorie</h2>
<div class="content">
<ul class="list-unstyled">
<li> <a href="/history-gk/">Istoria Gk</a> </li><li> <a href="/python-time-module/">Modul De Timp Python</a> </li><li> <a href="/kruskal/">Kruskal</a> </li><li> <a href="/markdown-tutorial/">Tutorial Markdown</a> </li><li> <a href="/listicles/">Listele</a> </li><li> <a href="/java-jsp/">Java-Jsp</a> </li><li> <a href="/git-tutorial/">Tutorial Git</a> </li><li> <a href="/commerce-11th/">Comerț - Al 11-Lea</a> </li><li> <a href="/news/">Ştiri</a> </li><li> <a href="/china-gk/">China Gk</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">Python | Convertiți lista în matrice Python</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Un portal de informatică pentru tocilari. Conține articole de informatică și programare bine scrise, bine gândite și bine explicate, chestionare și întrebări practice/programare competitivă/interviu pentru companie.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/python-convert-list-python-array"> <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="/functional-programming-paradigm">Paradigma de programare funcțională</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/pushdown-automata">Pushdown Automata (PDA)</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/python-seaborn/">Python-Seaborn</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/what-is-3-8-inch-decimal">Ce înseamnă 3/8 inch în zecimală?</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/computer-graphics/">Grafică Pe Computer</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="/latex-partial-derivative">diferențiere parțială în latex</a>
</li><li><a href="/gimp-vs-inkscape">inkscape vs gimp</a>
</li><li><a href="/pete-davidson">pete davidson</a>
</li><li><a href="/arp-commands">comanda arp</a>
</li><li><a href="/java-scanner-next-method">in.next java</a>
</li><li><a href="/symmetric-difference-between-two-sets">diferenta simetrica</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="//lt.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>