Šajā rakstā mēs uzzināsim, kā tekstam pievienot atstarpes/cilnes, izmantojot HTML un CSS . Mēs zinām, ka HTML pēc noklusējuma neatbalsta vairāk nekā vienu atstarpi, tāpēc mums ir nepieciešami daži papildu atribūti vai CSS, lai starp tekstu iegūtu papildu atstarpi.
Šīs ir šādas pieejas, izmantojot tās, tekstā varam pievienot atstarpes/cilnes:
Satura rādītājs
HTML entītiju izmantošana
- The rakstzīmju entītija tiek izmantota, lai apzīmētu nedalāmu atstarpi, kas ir fiksēta atstarpe. To var uztvert kā divas reizes lielāku telpu nekā parastā telpa. To izmanto, lai rindā izveidotu atstarpi, ko nevar pārtraukt ar vārdu aplaušanu.
- The rakstzīmju entītija tiek izmantota, lai apzīmētu “en” atstarpi, kas nozīmē pašreizējā fonta pusi punkta lielumu. To var uztvert kā divas reizes lielāku telpu nekā parastā telpa.
- The rakstzīmju entītija tiek izmantota, lai apzīmētu atstarpi “em”, kas nozīmē vienādu ar pašreizējā fonta punkta lielumu. To var uztvert kā četras reizes lielāku telpu nekā parastā telpa.
Sintakse
// Regular space // Two spaces gap // Four spaces gap>
Piemērs: Šajā piemērā mēs redzēsim, kā izmantot atstarpes, un, lūdzu, neaizmirstiet pievienot , , un &emsp kodā, kur starp tekstu jāpievieno atstarpe.
html Kā tekstā ievietot atstarpes/cilnes, izmantojot HTML/CSS? virsraksts> galva> <body> <h1 style='color: green'>techcodeview.comh1> <b>Kā tekstā ievietot atstarpes/cilnes, izmantojot HTML/CSS?b><p>Šī ir parasta atstarpe.p><p>Šī ir divu atstarpju atstarpe.p><p>Tas ir četras atstarpes gap.p> body> html>></pre> </code> <p dir='ltr'> <b> <strong>Izvade:</strong> </b> </p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/java-list">java saraksti</a>
</blockquote> <img src='//techcodeview.com/img/css-questions/66/how-insert-spaces-tabs-text-using-html.webp' alt="labdarības organizācijas"><h2 id='using-the-tabsize-property-in-css'> <b> <strong>Cilnes izmēra īpašuma izmantošana CSS</strong> </b> </h2><p dir='ltr'><span>The</span> <span>cilnes izmēra īpašums CSS</span> <span>tiek izmantots, lai iestatītu atstarpju skaitu katrā parādītajā tabulēšanas rakstzīmē. Mainot šo vērtību, vienā cilnes rakstzīmē var ievietot nepieciešamo vietu. Tomēr šī metode darbojas tikai ar iepriekš formatētu tekstu (izmantojot</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>Kā tekstā ievietot atstarpes/cilnes, izmantojot HTML/CSS? virsraksts><style>.tab1 { cilnes izmērs: 2; } .tab2 { cilnes izmērs: 4; } .tab4 { cilnes izmērs: 8; } style> head> <body> <h1 style='color: green'>techcodeview.comh1> <b>Kā tekstā ievietot atstarpes/cilnes, izmantojot HTML/CSS?b><pre class='hljs'zalupa>Šī ir cilne ar 2 spaces.pre><pre class='hljs'zalupa>Šī ir cilne ar 4 spaces.pre><pre class='hljs'zalupa>Šī ir cilne ar 8 spaces.pre> body> html> Output: Izmantojot pielāgotu CSS Var izveidot jaunu klasi, kas nodrošina noteiktu atstarpi, izmantojot margin-left rekvizītu. Vietas apjomu var norādīt ar šajā īpašumā norādīto pikseļu skaitu. Displeja rekvizīts ir arī iestatīts uz “inline-block”, lai pēc elementa netiktu pievienots rindiņas pārtraukums. Tas ļauj telpai atrasties blakus tekstam un citiem elementiem. Sintakse .tab { displejs: inline-block; margin-left: vērtība; /*, piemēram, vērtība = 40 pikseļi*/ } Piemērs: šajā piemērā mēs ieviesīsim iepriekš izskaidroto metodi. html<html> <head> <title>Kā tekstā ievietot atstarpes/cilnes, izmantojot HTML/CSS? virsraksts><style>.tab { displejs: inline-block; piemale-kreisais: 40 pikseļi; } style> head> <body> <h1 style='color: green'>techcodeview.comh1> <b>Kā tekstā ievietot atstarpes/cilnes, izmantojot HTML/CSS?b><p>Tas ir<span>span>tabulēšanas vieta dokumentā.p> body> html> Izvade:></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="">Kategorija</h2>
<div class="content">
<ul class="list-unstyled">
<li> <a href="/operators/">Operatori</a> </li><li> <a href="/python-collections-module/">Python Kolekcijas-Modulis</a> </li><li> <a href="/software-engineering/">Programmatūras Inženierijas</a> </li><li> <a href="/technical-scripter-2022-cat/">Tehniskais Scenārijs 2022</a> </li><li> <a href="/c-macro/">C Makro</a> </li><li> <a href="/bfs/">Bfs</a> </li><li> <a href="/python-dsa/">Python-Dsa</a> </li><li> <a href="/socket-programming/">Socket-Programmēšana</a> </li><li> <a href="/memory-management/">Atmiņas Vadība</a> </li><li> <a href="/excel-advanced/">Excel — Uzlabots</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">Regresija pret klasifikāciju mašīnmācībā</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Regresija pret klasifikāciju mašīnmācībā ar mašīnmācīšanos, mašīnmācīšanās apmācība, mašīnmācīšanās ievads, kas ir mašīnmācīšanās, datu mašīnmācīšanās, mašīnmācīšanās lietojumprogrammas, mašīnmācīšanās pret mākslīgo intelektu utt.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/regression-vs-classification-machine-learning"> <i class="fa fa-external-link"></i> Lasīt Vairāk</a> </p>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="languages aside section">
<div class="section-inner">
<h2 class="heading">Interesanti Raksti</h2>
<div class="content">
<ul class="list-unstyled">
<li class="item">
<span class="title"> <strong> <a href="/how-read-xml-file-java">Kā lasīt XML failu Java</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/10-best-android-emulators">10 labākie Android emulatori personālajam datoram 2024. gadā</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/ansible-galaxy">Ansible Galaxy</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/what-is-result">Kāds ir ∞ – ∞ rezultāts?</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/camelcase-python">Camelcase Python valodā</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">Populārākas Posts</h2>
<div class="content">
<ul class="list"> <li><a href="/java-list">saraksti java</a>
</li><li><a href="/infinite-loop-c">bezgalīga cilpa</a>
</li><li><a href="/kat-timpf">kat timpf augums</a>
</li><li><a href="/two-dimensional-array-c">c programma divdimensiju masīvam</a>
</li><li><a href="/what-is-special-character">ir īpašs raksturs</a>
</li><li><a href="/html-list-box">html sarakstlodziņš</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 Visas Tiesības Aizsargātas | <a href="//hu.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Atruna</a> | <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Par Mums</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Privātuma Politika</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>