V tem članku se bomo naučili, kako dodati presledke/zavihke v besedilo z uporabo HTML in CSS . Kot vemo, HTML privzeto ne podpira več kot enega presledka, zato potrebujemo nekaj dodatnih atributov ali CSS, da dobimo dodaten presledek med besedilom.
To so naslednji pristopi, z uporabo teh lahko v besedilo dodamo presledke/zavihke:
Kazalo
Uporaba entitet HTML
- The entiteta znakov se uporablja za označevanje neprekinjenega prostora, ki je fiksen prostor. To se lahko dojema kot dvakrat večji prostor od običajnega prostora. Uporablja se za ustvarjanje presledka v vrstici, ki ga ni mogoče prekiniti s prelivanjem besed.
- The Entiteta znakov se uporablja za označevanje presledka 'en', kar pomeni velikost polovice pike trenutne pisave. To se lahko dojema kot dvakrat večji prostor od običajnega prostora.
- The Entiteta znakov se uporablja za označevanje presledka 'em', kar pomeni enako velikosti pik trenutne pisave. To se lahko dojema kot štirikrat večji prostor od običajnega prostora.
Sintaksa
// Regular space // Two spaces gap // Four spaces gap>
primer: V tem primeru bomo videli, kako uporabljati presledke in ne pozabite dodati, in &emsp v kodi, kjer morate dodati presledek med besedilom.
html Kako vstaviti presledke/zavihke v besedilo z uporabo HTML/CSS? naslov> glava> <body> <h1 style='color: green'>techcodeview.comh1> <b>Kako vstaviti presledke/zavihke v besedilo z uporabo HTML/CSS?b><p>To je običajni prostor.p><p>To je vrzel za dva presledka.p><p>To je vrzel s štirimi presledki.p> body> html>></pre> </code> <p dir='ltr'> <b> <strong>Izhod:</strong> </b> </p> <br /> <div id="container-4ae8242bd8e42d94c5c0bf390d5144e6"></div><br /><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/base64-decoding-javascript">javascript base64 decode</a>
</blockquote> <img src='//techcodeview.com/img/css-questions/66/how-insert-spaces-tabs-text-using-html.webp' alt="char-entitete"><h2 id='using-the-tabsize-property-in-css'> <b> <strong>Uporaba lastnosti velikosti zavihka v CSS</strong> </b> </h2><p dir='ltr'><span>The</span> <span>lastnost tab-size v CSS</span> <span>se uporablja za nastavitev števila presledkov na vsakem prikazanem znaku zavihka. Spreminjanje te vrednosti omogoča vstavljanje potrebne količine prostora na en tabulatorski znak. Vendar ta metoda deluje samo s predhodno oblikovanim besedilom (z uporabo</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>Kako vstaviti presledke/zavihke v besedilo z uporabo HTML/CSS? naslov><style>.tab1 { velikost zavihka: 2; } .tab2 { velikost zavihka: 4; } .tab4 { velikost zavihka: 8; } slog> glava> <body> <h1 style='color: green'>techcodeview.comh1> <b>Kako vstaviti presledke/zavihke v besedilo z uporabo HTML/CSS?b><pre class='hljs'zalupa>To je zavihek z 2 presledkoma.pre><pre class='hljs'zalupa>To je zavihek s 4 presledki.pre><pre class='hljs'zalupa>To je zavihek z 8 presledki.pre> body> html> Izhod: uporaba CSS po meri Ustvarite lahko nov razred, ki daje določeno količino razmika z uporabo lastnosti margin-left. Količina prostora je lahko podana s številom slikovnih pik, ki je določeno v tej lastnosti. Lastnost prikaza je prav tako nastavljena na 'inline-block', tako da za elementom ni dodan noben prelom vrstice. To omogoča, da prostor sedi poleg besedila in drugih elementov. Sintaksa .tab { display: inline-block; rob-levo: vrednost; /* za npr.: value = 40px*/ } Primer: V tem primeru bomo implementirali zgoraj razloženo metodo. html<html> <head> <title>Kako vstaviti presledke/zavihke v besedilo z uporabo HTML/CSS? naslov><style>.tab { display: inline-block; rob-levo: 40px; } slog> glava> <body> <h1 style='color: green'>techcodeview.comh1> <b>Kako vstaviti presledke/zavihke v besedilo z uporabo HTML/CSS?b><p>To je a<span>span>tab prostor v dokumentu.p> body> html> Izhod:></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="/python/">Python</a> </li><li> <a href="/cube-puzzles/">Uganke S Kockami</a> </li><li> <a href="/natural-language-processing/">Obdelava Naravnega Jezika</a> </li><li> <a href="/graphic-designing/">Grafično Oblikovanje</a> </li><li> <a href="/python-numpy-mathematical-function/">Python Numpy-Matematična Funkcija</a> </li><li> <a href="/artificial-intelligence/">Umetna Inteligenca</a> </li><li> <a href="/knapsack/">Nahrbtnik</a> </li><li> <a href="/cpp-strings-library/">Cpp-Strings-Library</a> </li><li> <a href="/cpp-namespaces/">Imenski Prostori Cpp</a> </li><li> <a href="/chemical-formulas/">Kemijske Formule</a> </li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//aside-->
<aside class="testimonials aside section">
<div class="section-inner">
<h2 class="heading">Bash Če</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Izjava Bash If z Bash, uvod v Bash, skriptno izvajanje Bash, lupina Bash, zgodovina Bash, funkcije Bash, datotečni sistem in dovoljenja za datoteke, relativna proti absolutni poti, skript Hello World Bash, spremenljivke Bash, funkcije Bash, pogojni stavki Bash itd.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/bash-if"> <i class="fa fa-external-link"></i> Preberi Več</a> </p>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="languages aside section">
<div class="section-inner">
<h2 class="heading">Zanimivi Članki</h2>
<div class="content">
<ul class="list-unstyled">
<li class="item">
<span class="title"> <strong> <a href="/what-is-full-form-cdr">Kaj je polna oblika CDR</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/what-is-blooket-blooket-review-2023">Kaj je Blooket – Blooket Review 2023</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/advantages-disadvantages-smartphones">Prednosti in slabosti pametnih telefonov</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/image-color-picker-color-code-from-image">Izbirnik barv slike – barvna koda iz slike (HEXA in RGB)</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/is-zero-even-odd-number">Ali je nič sodo ali liho število?</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">Priljubljene Objave</h2>
<div class="content">
<ul class="list"> <li><a href="/govinda">igralec govinda</a>
</li><li><a href="/jquery">kaj je jquery</a>
</li><li><a href="/dr-vikas-divyakirti">vikas divyakirti</a>
</li><li><a href="/java-string-compare">primerljiv niz</a>
</li><li><a href="/nfa">nedeterministični končni avtomati</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 Vse Pravice Pridržane | <a href="//sl.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Zavrnitev Odgovornosti</a> | <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">O Podjetju</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Politika Zasebnosti</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>