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="/c-arrays/">C-Arrays</a> </li><li> <a href="/circles/">Cirkler</a> </li><li> <a href="/technical-scripter/">Teknisk scripter</a> </li><li> <a href="/quotes/">Citater</a> </li><li> <a href="/photoshop-tutorial/">Photoshop Tutorial</a> </li><li> <a href="/java-abstract-class/">Java-Abstrakt Klasse Og Interface</a> </li><li> <a href="/matrix/">Matrix</a> </li><li> <a href="/euler-circuit/">Euler-Kredsløb</a> </li><li> <a href="/blogathon-2021-cat/">Blogathon-2021</a> </li><li> <a href="/typescript-tutorial/">Typescript-Vejledning</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">Sådan låser du formler i Excel</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> En datalogiportal for nørder. Den indeholder velskrevne, gennemtænkte og velforklarede datalogi- og programmeringsartikler, quizzer og spørgsmål om praksis/konkurrencedygtig programmering/virksomhedsinterview.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/how-lock-formulas-excel"> <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="/when-do-sat-scores-come-out-131506">Hvornår udkommer SAT-score? Frigivelsesplan for SAT Score</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/how-sort-characters-string-javascript">Sådan sorteres tegn i en streng i JavaScript</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/difference-between-supervised">Forskellen mellem superviseret og uovervåget læring</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/geometry-definition">Geometri – Definition, eksempler, 2D- og 3D-former og applikationer</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/dsa-tutorials/">Dsa Tutorials</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="/stdin-stdout-c">stdin i c</a>
</li><li><a href="/how-delete-file-java">slette filen i java</a>
</li><li><a href="/javascript-string-replace-method">js udskiftning</a>
</li><li><a href="/java-string-split">streng split java</a>
</li><li><a href="/java-convert-int-string">hvordan man konverterer et heltal til en streng i 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 Alle Rettigheder Forbeholdes | <a href="//da.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>