Š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="/algo-geek-2021-cat/">Kaut Kas — Geiks 2021</a> </li><li> <a href="/python-basics/">Python-Basics</a> </li><li> <a href="/socket-programming/">Socket-Programmēšana</a> </li><li> <a href="/binary-search-tree/">Binārs meklēšanas koks</a> </li><li> <a href="/c-algorithm/">C++ Algoritms</a> </li><li> <a href="/python-numpy-io/">Python Numpy-Io</a> </li><li> <a href="/spring-cloud-tutorial/">Pavasara Mākoņu Apmācība</a> </li><li> <a href="/javascript-questions/">Javascript — Jautājumi</a> </li><li> <a href="/python-operators/">Python Operatori</a> </li><li> <a href="/amazon/">Amazon</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">Divja Bharti</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Divja Bharti: biogrāfija, vecums ar māti Terēzi, Narendra Modi, Mahatma Gandijs, Amitabs Bahčāns, Humajuns, Mangala Pandija biogrāfija utt.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/divya-bharti"> <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="/python/">Pitons</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/sum-of-all-numbers-that-can-be-formed-with-permutations-of-n-digits">Visu skaitļu summa, ko var izveidot ar n ciparu permutācijām</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/different-ways-concatenate-two-strings-golang">Dažādi veidi, kā savienot divas virknes Golangā</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/what-is-dijkstra-s-algorithm">Kas ir Dijkstras algoritms? | Ievads Dijkstra īsākā ceļa algoritmā</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/roman-number-1-100">Romiešu numurs 1 līdz 100</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="/excel-difference-between-two-dates">datumu atšķirība programmā Excel</a>
</li><li><a href="/convert-25-c-into-kelvin-scale">25 c līdz k</a>
</li><li><a href="/java-tuple">java bloks</a>
</li><li><a href="/an-array-strings-c">virkņu masīvs c</a>
</li><li><a href="/java-convert-string-int">pārvērst strinu par int</a>
</li><li><a href="/how-convert-string-json-object-java">virkne uz json 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 Visas Tiesības Aizsargātas | <a href="//it.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>