V tomto článku sa naučíme, ako pridať medzery/tabulátory do textu pomocou HTML a CSS . Ako vieme, HTML v predvolenom nastavení nepodporuje viac ako jednu medzeru, preto potrebujeme nejaké extra atribúty alebo CSS, aby sme medzi text dostali medzeru navyše.
Toto sú nasledujúce prístupy, pomocou ktorých môžeme do textu pridať medzery/tabulátory:
Obsah
Používanie entít HTML
- The znaková entita sa používa na označenie nedeliteľnej medzery, ktorá je pevnou medzerou. To môže byť vnímané ako dvojnásobok priestoru normálneho priestoru. Používa sa na vytvorenie medzery v riadku, ktorú nemožno prelomiť zalamovaním slov.
- The znaková entita sa používa na označenie medzery „en“, čo znamená polovičnú veľkosť aktuálneho písma. To môže byť vnímané ako dvojnásobok priestoru normálneho priestoru.
- The znaková entita sa používa na označenie medzery „em“, čo znamená veľkosť rovnajúcu sa bodovej veľkosti aktuálneho písma. To môže byť vnímané ako štvornásobok priestoru normálneho priestoru.
Syntax
// Regular space // Two spaces gap // Four spaces gap>
Príklad: V tomto príklade uvidíme, ako používať medzery, a nezabudnite pridať , a &emsp v kóde, kde je potrebné pridať medzeru medzi text.
html Ako vložiť medzery/tabulátory do textu pomocou HTML/CSS? názov> hlava> <body> <h1 style='color: green'>techcodeview.comh1> <b>Ako vložiť medzery/tabulátory do textu pomocou HTML/CSS?b><p>Toto je pravidelný priestor.p><p>Toto je dvojmiestna medzera.p><p>Toto je štvormiestna medzera.p> telo> html>></pre> </code> <p dir='ltr'> <b> <strong>Výkon:</strong> </b> </p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/base64-decoding-javascript">dekódovanie javascript base64</a>
</blockquote> <img src='//techcodeview.com/img/css-questions/66/how-insert-spaces-tabs-text-using-html.webp' alt="charitatívne subjekty"><h2 id='using-the-tabsize-property-in-css'> <b> <strong>Použitie vlastnosti veľkosti karty v CSS</strong> </b> </h2><p dir='ltr'><span>The</span> <span>vlastnosť tab-size v CSS</span> <span>sa používa na nastavenie počtu medzier na každom tabulátore, ktorý sa zobrazí. Zmena tejto hodnoty umožňuje vložiť potrebné množstvo medzery na jeden znak tabulátora. Táto metóda však funguje iba s vopred naformátovaným textom (pomocou</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>Ako vložiť medzery/tabulátory do textu pomocou HTML/CSS? názov><style>.tab1 { tab-size: 2; } .tab2 { tab-size: 4; } .tab4 { tab-size: 8; } štýl> hlava> <body> <h1 style='color: green'>techcodeview.comh1> <b>Ako vložiť medzery/tabulátory do textu pomocou HTML/CSS?b><pre class='hljs'zalupa>Toto je karta s 2 medzerami.pre><pre class='hljs'zalupa>Toto je karta so 4 medzerami.pre><pre class='hljs'zalupa>Toto je karta s 8 medzerami.pre> body> html> Výstup: Použitie vlastného CSS Pomocou vlastnosti margin-left je možné vytvoriť novú triedu, ktorá poskytuje určité množstvo medzier. Množstvo priestoru môže byť dané počtom pixelov špecifikovaným v tejto vlastnosti. Vlastnosť display je tiež nastavená na „inline-block“, aby sa za prvok nepridal žiadny zlom riadka. To umožňuje priestoru sedieť vedľa textu a iných prvkov. Syntax .tab { display: inline-block; margin-left: value; /* pre napr.: value = 40px*/ } Príklad: V tomto príklade budeme implementovať vyššie vysvetlenú metódu. html<html> <head> <title>Ako vložiť medzery/tabulátory do textu pomocou HTML/CSS? názov><style>.tab { display: inline-block; ľavý okraj: 40px; } štýl> hlava> <body> <h1 style='color: green'>techcodeview.comh1> <b>Ako vložiť medzery/tabulátory do textu pomocou HTML/CSS?b><p>Toto je<span>span>tabuľkový priestor v dokumente.p> telo> html> Výstup:></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="">Kategórie</h2>
<div class="content">
<ul class="list-unstyled">
<li> <a href="/24-7-innovation-labs/">24*7 Inovačných Laboratórií</a> </li><li> <a href="/maths/">Matematika</a> </li><li> <a href="/next-js/">Next.js</a> </li><li> <a href="/moores-voting-algorithm/">Moorov Hlasovací Algoritmus</a> </li><li> <a href="/privacy-policy/">Zásady Ochrany Osobných Údajov</a> </li><li> <a href="/data-mining/">Data Mining</a> </li><li> <a href="/cryptography/">Kryptografia</a> </li><li> <a href="/unity-tutorial/">Návod Na Jednotu</a> </li><li> <a href="/python-numpy-arraymanipulation/">Python Numpy-Arraymanipulation</a> </li><li> <a href="/java-8-cat/">Java 8</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">It Problémy A Riešenia</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> It Problémy A Riešenia</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/it-problems-solutions/"> <i class="fa fa-external-link"></i> Čítajte Viac</a> </p>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="languages aside section">
<div class="section-inner">
<h2 class="heading">Zaujímavé Články</h2>
<div class="content">
<ul class="list-unstyled">
<li class="item">
<span class="title"> <strong> <a href="/dining-philosophers-problem">PROBLÉM FILOZOFIOV JEDÁLANIA</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/best-character-analysis-131778">Analýza najlepšej postavy: Daisy Buchanan - Veľký Gatsby</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/how-save-document-google-docs">Ako uložiť dokument v službe Dokumenty Google</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/c-templates">C++ šablóny</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/what-is-multicore-processor">Čo je to viacjadrový procesor?</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árne Príspevky</h2>
<div class="content">
<ul class="list"> <li><a href="/get-current-date-time-java">získať aktuálny dátum v jave</a>
</li><li><a href="/roman-number-1-100">1 až 100 rímskych č</a>
</li><li><a href="/java-convert-long-int">java long to int</a>
</li><li><a href="/java-convert-string-int">previesť reťazec na int</a>
</li><li><a href="/rekha">Herec Rekha</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 Všetky Práva Vyhradené | <a href="//no.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Odmietnutie Zodpovednosti</a> | <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">O Nás</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Zásady Ochrany Osobných Údajov</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>