Š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> <br /> <div id="container-4ae8242bd8e42d94c5c0bf390d5144e6"></div><br /><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><!--//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="/minecraft-blogs/">Minecraft Emuāri</a> </li><li> <a href="/cpp-containers-library/">Cpp-Containers-Library</a> </li><li> <a href="/typescript-tutorial/">Typescript Apmācība</a> </li><li> <a href="/css-misc/">Css — Dažādi</a> </li><li> <a href="/parents/">Vecāki</a> </li><li> <a href="/html-dom/">Html-Dom</a> </li><li> <a href="/java-abstract-class/">Java Abstraktā Klase Un Interfeiss</a> </li><li> <a href="/c-class-object/">C++ Klase Un Objekts</a> </li><li> <a href="/selenium-tutorial/">Selēna Apmācība</a> </li><li> <a href="/cyber-security-tutorial/">Kiberdrošības Apmācība</a> </li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//aside-->
<aside class="testimonials aside section">
<div class="section-inner">
<h2 class="heading">Ansible Galaxy</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Ansible Galaxy ar to, kas ir Ansible, vēsture, moduļi, ansible instalēšana operētājsistēmā Linux, rokasgrāmatas, tornis, lomas, mainīgie, atzīmes, galaktika, komandas apkrāptu lapas, Ansible Tower funkcijas utt.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/ansible-galaxy"> <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="/celebrity/">Slavenība</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/advantages-disadvantages-industry">Nozares priekšrocības un trūkumi</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/os-path-basename-method-python">Os.path.basename() metode python</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/java-string-class-methods">Java virkņu klases metodes</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/cin-c">cin C++ 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="/software-testing-tutorial">programmatūras testēšana</a>
</li><li><a href="/java-swing-tutorial">java šūpoles</a>
</li><li><a href="/java-string-compare">salīdziniet java virknes</a>
</li><li><a href="/c-dictionary">vārdnīca c#</a>
</li><li><a href="/recursion-java">rekursija java</a>
</li><li><a href="/how-call-method-java">kā java izsaukt metodi</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="//sl.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>