Î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="/java-class-object/">Clasă Și Obiect Java</a> </li><li> <a href="/python-testing/">Testarea Python</a> </li><li> <a href="/es6-cat/">Es6</a> </li><li> <a href="/java-mail-tutorial/">Tutorial Java Mail</a> </li><li> <a href="/java-swing/">Java Swing</a> </li><li> <a href="/java-vector-class/">Clasa Java Vector</a> </li><li> <a href="/money-banking/">Bani Și Servicii Bancare</a> </li><li> <a href="/chemical-formulas/">Formule Chimice</a> </li><li> <a href="/pc-tips/">Sfaturi Pc</a> </li><li> <a href="/data-link-layer/">Stratul De Legătură De Date</a> </li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//aside-->
<aside class="testimonials aside section">
<div class="section-inner">
<h2 class="heading">Clasa Java PrintWriter</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Clasă Java PrintWriter pentru începători și profesioniști cu exemple despre Java IO sau Input Output în Java cu flux de intrare, flux de ieșire, clasa de cititor și scriitor. Pachetul java.io oferă API pentru citirea și scrierea datelor.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/java-printwriter-class"> <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="/how-inverse-matrix-using-numpy">Cum se inversează o matrice folosind NumPy</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/python-tkinter-tutorial">Tutorial Python Tkinter</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/javascript-array-splice-method">Metoda JavaScript Array splice().</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/difference-between-cmms">Diferența dintre CMMS și ERP</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/wumpus-world-artificial-intelligence">Lumea Wumpus în inteligența artificială</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="/list-cities-usa">câte orașe sunt în noi</a>
</li><li><a href="/react-map">harta reactjs</a>
</li><li><a href="/java-convert-string-int">șir în întreg java</a>
</li><li><a href="/jasmine-davis">Jasmine Davis în copilărie</a>
</li><li><a href="/how-read-csv-file-java">citiți din csv java</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>