Š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="/commerce-difference-between/">Tirdzniecība — Atšķirība Starp</a> </li><li> <a href="/access-modifiers/">Piekļuves Modifikatori</a> </li><li> <a href="/cpp-bitset/">Cpp Bitkopa</a> </li><li> <a href="/python-basic-programs/">Python Pamata Programmas</a> </li><li> <a href="/counting-sort/">Skaitīšana-Šķirošana</a> </li><li> <a href="/python-math-library-functions/">Python Matemātikas Bibliotēkas Funkcijas</a> </li><li> <a href="/splunk-tutorial/">Splunk Apmācība</a> </li><li> <a href="/linux-file-contents/">Linux Faila Saturs</a> </li><li> <a href="/google/">Google</a> </li><li> <a href="/randomized/">Randomizēts</a> </li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//aside-->
<aside class="testimonials aside section">
<div class="section-inner">
<h2 class="heading">Trapecveida noteikums</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Datorzinātņu portāls dīķiem. Tajā ir labi uzrakstīti, pārdomāti un labi izskaidroti raksti par datorzinātnēm un programmēšanu, viktorīnas un prakses/konkurētspējīgas programmēšanas/uzņēmuma intervijas jautājumi.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/trapezoidal-rule"> <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="/servlet-tutorial/">Servleta Apmācība</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/numpy-sort-python">numpy.kārtot Python</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/java-date-parse-method">Java datuma parsēšanas () metode</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/care-bear-names-2024-names">Care Bear Names 2024 (vārdi un personāži)</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/composition-relations">Attiecību sastāvs</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="/sql-select-from-multiple-tables">izvēlieties no vairākām sql tabulām</a>
</li><li><a href="/npm-install-command">npm instalēšanas komanda</a>
</li><li><a href="/java-math-random-method">java math.random</a>
</li><li><a href="/alphabet-numbers">alfabēts pēc cipariem</a>
</li><li><a href="/how-see-blocked-number">bloķēti numuri</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="//cs.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>