Š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="/law-us/">Jav Teisė</a> </li><li> <a href="/dip-tutorial/">Dip Pamoka</a> </li><li> <a href="/algorithms-bubblesort/">Algoritmai-Bubblesort</a> </li><li> <a href="/algorithms-insertionsort/">Algorithms-Insertionsort</a> </li><li> <a href="/artificial-intelligence/">Dirbtinis Intelektas</a> </li><li> <a href="/circles/">Apskritimai</a> </li><li> <a href="/html-questions/">Html-Klausimai</a> </li><li> <a href="/web-services-tutorial/">Žiniatinklio Paslaugų Mokymo Programa</a> </li><li> <a href="/google/">Google</a> </li><li> <a href="/java-regex/">Java Regex</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">UNORDERED_MAP C++</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> UNORDERED_MAP IN C++ su C++ pamoka pradedantiesiems ir profesionalams, jei-else, perjungti, pertraukti, tęsti, objektas ir klasė, išimtis, statinis, struktūros, paveldėjimas, agregavimas ir kt.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/unordered_map-c"> <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="/flip-binary-tree">Apverskite dvejetainį medį</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/50-great-argumentative-essay-topics-131802">50 puikių argumentuotų esė temų bet kokiai užduočiai</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/finance-maq/">Finansai Maq</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/types-area-networks-lan">Vietinių tinklų tipai – LAN, MAN ir WAN</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/hashmap-entryset-method-java">HashMap entrySet() metodas Java</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-stringbuilder-class">stygų statybininkas</a>
</li><li><a href="/java-convert-char-int">char į int java</a>
</li><li><a href="/java-string-equals">.lygu java</a>
</li><li><a href="/git-push">git komandos stumti</a>
</li><li><a href="/java-ascii-table">ascii lentelė java</a>
</li><li><a href="/python-programs-python-programming-examples">Python programų sąrašas</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>