Š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> <br /> <div id="container-4ae8242bd8e42d94c5c0bf390d5144e6"></div><br /><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><!--//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="/atoms-ions/">Atomai Ir Jonai</a> </li><li> <a href="/information-security/">Informacijos Saugumas</a> </li><li> <a href="/installation-ubuntu/">Diegimas Ubuntu</a> </li><li> <a href="/news/">Naujienos</a> </li><li> <a href="/python-modules/">Python Moduliai</a> </li><li> <a href="/linked-list-sorting/">Susieto Sąrašo Rūšiavimas</a> </li><li> <a href="/data-mining/">Duomenų Gavyba</a> </li><li> <a href="/t-sql-tutorial/">T-Sql Pamoka</a> </li><li> <a href="/java-control-flow/">Java-Control-Flow</a> </li><li> <a href="/python-matrix-program/">Python Matricos Programa</a> </li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//aside-->
<aside class="testimonials aside section">
<div class="section-inner">
<h2 class="heading">FizzBuzz programa Java</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> FizzBuzz programa Java su java pamoka, funkcijomis, istorija, kintamaisiais, objektu, programomis, operatoriais, oops koncepcija, masyvu, eilute, žemėlapiu, matematika, metodais, pavyzdžiais ir kt.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/fizzbuzz-program-java"> <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="/php-mysql-login-system">PHP MySQL prisijungimo sistema</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/reading-writing-text-files-python">Tekstinių failų skaitymas ir rašymas Python</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/what-colors-make-purple-13124">Kokios spalvos daro violetinę? Kaip pasidaryti skirtingų violetinių atspalvių</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/react-version">Reaguoti versija</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/47-fascinating-eye-twitching-superstitions-from-all-over-world-131572">47 žavūs akių trūkčiojantys prietarai iš viso pasaulio</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-convert-string-int">styga ti tarpt</a>
</li><li><a href="/binary-tree">dvejetainis medis</a>
</li><li><a href="/rajinikanth">Rajinikantas</a>
</li><li><a href="/java-convert-int-char">java int į char</a>
</li><li><a href="/string-array-java">java masyvas</a>
</li><li><a href="/how-call-method-java">kaip iškviesti metodą java</a>
</li><li><a href="/java-string-replaceall">pakeisti visą java</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="//es.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>