I denne artikel vil vi lære, hvordan du tilføjer mellemrum/tabulatorer i tekst ved hjælp af HTML og CSS . Da vi ved, at HTML ikke understøtter mere end ét mellemrum som standard, er det derfor, vi har brug for nogle ekstra attributter eller CSS for at få ekstra plads mellem teksten.
Disse er følgende fremgangsmåder ved at bruge disse kan vi tilføje mellemrum/tabulatorer i tekst:
Indholdsfortegnelse
Brug af HTML-enheder
- Det karakterentitet bruges til at betegne et ikke-afbrydende mellemrum, som er et fast mellemrum. Dette kan opfattes som dobbelt så meget rum som et normalt rum. Det bruges til at skabe et mellemrum i en linje, der ikke kan brydes af ordombrydning.
- Det karakterentitet bruges til at angive et 'en' mellemrum, hvilket betyder halv punktstørrelse af den aktuelle skrifttype. Dette kan opfattes som dobbelt så meget rum som et normalt rum.
- Det karakterentitet bruges til at angive et 'em' mellemrum, hvilket betyder lig med punktstørrelsen af den aktuelle skrifttype. Dette kan opfattes som fire gange rummet af et normalt rum.
Syntaks
// Regular space // Two spaces gap // Four spaces gap>
Eksempel: I dette eksempel skal vi se, hvordan man bruger mellemrum, og glem ikke at tilføje, , og &emsp i kode, hvor du skal tilføje mellemrum mellem teksten.
html Hvordan indsætter man mellemrum/tabulatorer i tekst ved hjælp af HTML/CSS? titel> hoved> <body> <h1 style='color: green'>techcodeview.comh1> <b>Sådan indsætter du mellemrum/tabulatorer i tekst ved hjælp af HTML/CSS?b><p>Dette er et almindeligt space.p><p>Dette er en to mellemrum gap.p><p>Dette er en fire mellemrum gap.p> body> html>></pre> </code> <p dir='ltr'> <b> <strong>Produktion:</strong> </b> </p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/interface-java">grænseflade i java</a>
</blockquote> <img src='//techcodeview.com/img/css-questions/66/how-insert-spaces-tabs-text-using-html.webp' alt="char-enheder"><h2 id='using-the-tabsize-property-in-css'> <b> <strong>Brug af egenskab i fanestørrelse i CSS</strong> </b> </h2><p dir='ltr'><span>Det</span> <span>tab-størrelse egenskab i CSS</span> <span>bruges til at indstille antallet af mellemrum på hvert tabulatortegn, der vises. Ændring af denne værdi gør det muligt at indsætte den nødvendige mængde plads på et tabulatortegn. Denne metode virker dog kun med forudformateret tekst (ved hjælp af</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>Hvordan indsætter man mellemrum/tabulatorer i tekst ved hjælp af HTML/CSS? titel><style>.tab1 { tab-size: 2; } .tab2 { tab-size: 4; } .tab4 { tab-size: 8; } stil> hoved> <body> <h1 style='color: green'>techcodeview.comh1> <b>Sådan indsætter du mellemrum/tabulatorer i tekst ved hjælp af HTML/CSS?b><pre class='hljs'zalupa>Dette er en fane med 2 mellemrum.pre><pre class='hljs'zalupa>Dette er en fane med 4 mellemrum.pre><pre class='hljs'zalupa>Dette er en fane med 8 mellemrum.pre> body> html> Output: Brug af brugerdefineret CSS Der kan oprettes en ny klasse, som giver en vis mængde mellemrum ved at bruge egenskaben margin-left. Mængden af plads kan være givet af antallet af pixels, der er angivet i denne egenskab. Visningsegenskaben er også sat til 'inline-blok', så der ikke tilføjes et linjeskift efter elementet. Dette giver plads til at sidde ved siden af tekst og andre elementer. Syntaks .tab { display: inline-blok; margin-venstre: værdi; /* for f.eks.: værdi = 40px*/ } Eksempel: I dette eksempel skal vi implementere den ovenfor forklarede metode. html<html> <head> <title>Hvordan indsætter man mellemrum/tabulatorer i tekst ved hjælp af HTML/CSS? titel><style>.tab { display: inline-blok; margin-venstre: 40px; } stil> hoved> <body> <h1 style='color: green'>techcodeview.comh1> <b>Sådan indsætter du mellemrum/tabulatorer i tekst ved hjælp af HTML/CSS?b><p>Dette er en<span>span>tab mellemrum i document.p> body> html> Output:></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="">Kategori</h2>
<div class="content">
<ul class="list-unstyled">
<li> <a href="/tensorflow-tutorial/">Tensorflow Tutorial</a> </li><li> <a href="/cpp-inheritance/">Cpp-Arv</a> </li><li> <a href="/microservices-tutorial/">Tutorial Til Mikrotjenester</a> </li><li> <a href="/javascript-lodash/">Javascript-Lodash</a> </li><li> <a href="/rxjs-tutorial/">Rxjs Tutorial</a> </li><li> <a href="/algorithms-analysis-algorithms/">Algoritmer - Analyse Af Algoritmer</a> </li><li> <a href="/algorithms-greedy-algorithms/">Algoritmer-Grådige Algoritmer</a> </li><li> <a href="/python-modules/">Python-Moduler</a> </li><li> <a href="/cube-puzzles/">Kube-Puslespil</a> </li><li> <a href="/python-numpy-matrix-function/">Python Numpy-Matrix Funktion</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">C++ liste</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> C++ Listefunktion med tutorial for begyndere og professionelle med eksempler på assign(), emplace(), empty(), insert(), sort(), size(), resize() osv.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/c-list"> <i class="fa fa-external-link"></i> Læs Mere</a> </p>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="languages aside section">
<div class="section-inner">
<h2 class="heading">Interessante Artikler</h2>
<div class="content">
<ul class="list-unstyled">
<li class="item">
<span class="title"> <strong> <a href="/ksp-chemistry-complete-guide-solubility-constant-131686">Ksp Kemi: Komplet guide til opløselighedskonstanten</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/how-center-images-css">Hvordan centrerer man billeder i CSS?</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/what-does-alt-t-do">Hvad gør Alt + T?</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/when-is-psat-2023-psat-test-dates-1311626">Hvornår er PSAT? 2023 PSAT testdatoer</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/future-yearsact-test-dates-1311214">Future Years' ACT-testdatoer: 2024, 2025 og videre</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ære Indlæg</h2>
<div class="content">
<ul class="list"> <li><a href="/how-does-computer-work">hvordan fungerer en computer</a>
</li><li><a href="/immutable-list-java">uforanderlig liste</a>
</li><li><a href="/java-character-compare-method">karakter.sammenlign java</a>
</li><li><a href="/shell-script-parameters">parameter i shell-script</a>
</li><li><a href="/java-convert-date-string">java dato til streng</a>
</li><li><a href="/java-enums">java enums</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 Alle Rettigheder Forbeholdes | <a href="//tr.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Ansvarsfraskrivelse</a> | <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Om Os</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Privatlivspolitik</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>