Šiame straipsnyje sužinosime, kaip tekste pridėti tarpų / skirtukų naudojant HTML ir CSS . Kaip žinome, HTML pagal numatytuosius nustatymus nepalaiko daugiau nei vieno tarpo, todėl mums reikia papildomų atributų arba CSS, kad tarp teksto būtų papildomos vietos.
Tai yra šie metodai, naudodami juos, tekste galime pridėti tarpų / skirtukų:
Turinys
HTML objektų naudojimas
- The simbolio objektas naudojamas nepertraukiamam tarpui, kuris yra fiksuotas tarpas, žymėti. Tai gali būti suvokiama kaip dvigubai didesnė nei įprastos erdvės erdvė. Jis naudojamas norint sukurti tarpą eilutėje, kurios negalima sulaužyti laužant žodžius.
- The simbolio objektas naudojamas „en“ tarpui žymėti, o tai reiškia pusės dabartinio šrifto dydį. Tai gali būti suvokiama kaip dvigubai didesnė nei įprastos erdvės erdvė.
- The simbolio objektas naudojamas žymėti „em“ tarpą, o tai reiškia lygų dabartinio šrifto taško dydžiui. Tai gali būti suvokiama kaip keturis kartus didesnė už įprastą erdvę.
Sintaksė
// Regular space // Two spaces gap // Four spaces gap>
Pavyzdys: Šiame pavyzdyje pamatysime, kaip naudoti tarpus ir nepamirškite pridėti , , ir &emsp kode, kur reikia pridėti tarpo tarp teksto.
html Kaip įterpti tarpus/tabuliukus tekste naudojant HTML/CSS? pavadinimas> galva> <body> <h1 style='color: green'>techcodeview.comh1> <b>Kaip įterpti tarpus/skirtukus į tekstą naudojant HTML/CSS?b><p>Tai įprastas tarpas.p><p>Tai yra dviejų tarpų tarpas.p><p>Tai yra keturių tarpų tarpas.p> body> html>></pre> </code> <p dir='ltr'> <b> <strong>Išvestis:</strong> </b> </p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/java-throw-exception">Java metimo išimtis</a>
</blockquote> <img src='//techcodeview.com/img/css-questions/66/how-insert-spaces-tabs-text-using-html.webp' alt="labdaros subjektai"><h2 id='using-the-tabsize-property-in-css'> <b> <strong>Skirtuko dydžio nuosavybės naudojimas CSS</strong> </b> </h2><p dir='ltr'><span>The</span> <span>skirtuko dydžio nuosavybė CSS</span> <span>naudojamas norint nustatyti tarpų skaičių kiekviename rodomame skirtuko simbolie. Pakeitus šią reikšmę, viename skirtuko ženkle galima įterpti reikiamą vietą. Tačiau šis metodas veikia tik su iš anksto suformatuotu tekstu (naudojant</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>Kaip įterpti tarpus/tabuliukus tekste naudojant HTML/CSS? pavadinimas><style>.tab1 { skirtuko dydis: 2; } .tab2 { skirtuko dydis: 4; } .tab4 { skirtuko dydis: 8; } style> head> <body> <h1 style='color: green'>techcodeview.comh1> <b>Kaip įterpti tarpus/skirtukus į tekstą naudojant HTML/CSS?b><pre class='hljs'zalupa>Tai yra skirtukas su 2 tarpais.pre><pre class='hljs'zalupa>Tai skirtukas su 4 tarpais.pre><pre class='hljs'zalupa>Tai yra skirtukas su 8 tarpais.pre> body> html> Output: Custom CSS naudojimas Galima sukurti naują klasę, kuri suteikia tam tikrą tarpą naudojant margin-left ypatybę. Vietos kiekį galima nurodyti pagal šioje savybėje nurodytą pikselių skaičių. Rodymo ypatybė taip pat nustatyta į „inline-block“, kad po elemento nebūtų pridėta eilutės lūžio. Tai leidžia vietai sėdėti šalia teksto ir kitų elementų. Sintaksė .tab { display: inline-block; paraštė-kairė: vertė; /*, pvz.: reikšmė = 40 pikselių*/ } Pavyzdys: Šiame pavyzdyje mes įgyvendinsime aukščiau paaiškintą metodą. html<html> <head> <title>Kaip įterpti tarpus/tabuliukus tekste naudojant HTML/CSS? pavadinimas><style>.tab { display: inline-block; paraštė kairėje: 40 pikselių; } style> head> <body> <h1 style='color: green'>techcodeview.comh1> <b>Kaip įterpti tarpus/skirtukus į tekstą naudojant HTML/CSS?b><p>Tai yra<span>span>tabuliavimo vieta dokumente.p> body> html> Išvestis:></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="">Kategorija</h2>
<div class="content">
<ul class="list-unstyled">
<li> <a href="/c-projects/">C++ Projektai</a> </li><li> <a href="/c-arrays/">C-Masyvai</a> </li><li> <a href="/companies-list/">Įmonių Sąrašas</a> </li><li> <a href="/javascript-dsa/">Javascript-Dsa</a> </li><li> <a href="/computer/">Kompiuteris</a> </li><li> <a href="/chemical-formulas/">Cheminės Formulės</a> </li><li> <a href="/prime-number/">Pirminis Skaičius</a> </li><li> <a href="/base-conversion/">Bazinė Konversija</a> </li><li> <a href="/gmail/">Gmail</a> </li><li> <a href="/gradle-tutorial/">„Gradle“ Pamoka</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">Kaip įdiegti užklausas „Python“ - „Windows“, „Linux“, „Mac“.</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Kompiuterių mokslo portalas, skirtas geikams. Jame yra gerai parašyti, gerai apgalvoti ir gerai paaiškinti informatikos ir programavimo straipsniai, viktorinos ir praktikos / konkurencinio programavimo / įmonės interviu klausimai.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/how-install-requests-python"> <i class="fa fa-external-link"></i> Skaityti Daugiau</a> </p>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="languages aside section">
<div class="section-inner">
<h2 class="heading">Įdomios Straipsniai</h2>
<div class="content">
<ul class="list-unstyled">
<li class="item">
<span class="title"> <strong> <a href="/java-convert-object-string">Java konvertuoti objektą į eilutę</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/java-method-class/">Java Metodo Klasė</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/json-dump-python">json.dump() Python</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/difference-between-coat">Skirtumas tarp palto ir švarko</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/julia-dictionary-methods/">Julia-Žodynas-Metodai</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">Populiarios Temos</h2>
<div class="content">
<ul class="list"> <li><a href="/java-string-replaceall">pakeisti visą java</a>
</li><li><a href="/java-math-sqrt-method">sqrt java matematika</a>
</li><li><a href="/java-convert-char-int">konvertuoti iš char į int java</a>
</li><li><a href="/what-is-full-form-dhl">dhl reiškia ką</a>
</li><li><a href="/what-is-apache">apache</a>
</li><li><a href="/cobol-tutorial">cobol programavimas</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 Visos Teisės Saugomos | <a href="//sk.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Atsisakymas</a> | <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Apie Mus</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Privatumo 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>