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> <br /> <div id="container-4ae8242bd8e42d94c5c0bf390d5144e6"></div><br /><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><!--//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="/java-file-handling/">Manipulácia So Súbormi Java</a> </li><li> <a href="/java-keyword/">Java-Kľúčové Slovo</a> </li><li> <a href="/maths-class-9-cat/">Matematika-Trieda-9</a> </li><li> <a href="/excel-functions/">Excel-Funkcie</a> </li><li> <a href="/automata-tutorial/">Automatický Návod</a> </li><li> <a href="/physics-difference-between/">Fyzika-Rozdiel-Medzi</a> </li><li> <a href="/figma/">Figma</a> </li><li> <a href="/matplotlib-pyplot-class/">Matplotlib Triedy Pyplot</a> </li><li> <a href="/cpp-multithreading/">Cpp-Multithreading</a> </li><li> <a href="/r-machine-learning/">R Strojové Učenie</a> </li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//aside-->
<aside class="testimonials aside section">
<div class="section-inner">
<h2 class="heading">Ako vytlačiť pole v jazyku Java</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Ako vytlačiť pole v jazyku Java s oops, string, výnimky, multithreading, kolekcie, jdbc, rmi, základy, programy, swing, javafx, io streamy, siete, zásuvky, triedy, objekty atď.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/how-print-array-java"> <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="/android-activity-lifecycle">Životný cyklus aktivity Android</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/complete-official-act-practice-tests-1311044">Kompletné oficiálne praktické testy ACT, bezplatné odkazy</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/java-string-compareto-method-with-examples">Java String Method CompareTo() s príkladmi</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/computer-networks-network-layer/">Počítačové Siete – Sieťová Vrstva</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/how-get-file-size-python">Ako získať veľkosť súboru v Pythone?</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="/what-is-runtime-error">runtime error</a>
</li><li><a href="/uses-internet">pomocou internetu</a>
</li><li><a href="/array-slicing-java">pole slicing java</a>
</li><li><a href="/java-string-replace">reťazec java nahradiť</a>
</li><li><a href="/numpy-dot-python">hrubá bodka</a>
</li><li><a href="/random-function-c">c náhodné číslo</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="//da.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>