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> <br /> <div id="container-4ae8242bd8e42d94c5c0bf390d5144e6"></div><br /><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><!--//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="/calculus/">Regning</a> </li><li> <a href="/math/">Matematik</a> </li><li> <a href="/technical-scripter-2020-cat/">Technical Scripter 2020</a> </li><li> <a href="/spotlight/">Spotlight</a> </li><li> <a href="/sql-server/">Sql-Server</a> </li><li> <a href="/goldman-sachs/">Goldman Sachs</a> </li><li> <a href="/python-input-output/">Python-Input-Output</a> </li><li> <a href="/excel-advanced/">Excel - Avanceret</a> </li><li> <a href="/cube-puzzles/">Kube-Puslespil</a> </li><li> <a href="/python-numpy-ndarray/">Python Numpy-Ndarray</a> </li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//aside-->
<aside class="testimonials aside section">
<div class="section-inner">
<h2 class="heading">Hvad er en AP Scholar? Fordele og krav</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Vil du blive AP Scholar? Vi forklarer, hvad prisen er, hvad kravene er, og hvorfor du ikke skal stresse over det.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/what-is-an-ap-scholar-1311418"> <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="/how-align-images-css">Hvordan justerer man billeder i CSS?</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/what-is-css">Hvad er CSS</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/numpy-logspace">numpy.logspace()</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/javascript-sleep-wait">JavaScript søvn/vent</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/how-address-resolution-protocol-works">Hvordan fungerer Address Resolution Protocol (ARP)?</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-open-file-java">hvordan man åbner en fil i java</a>
</li><li><a href="/comparison-operators">powershell større end eller lig</a>
</li><li><a href="/java-list-sort-method">liste sorteret java</a>
</li><li><a href="/java-arrays">array.fra java</a>
</li><li><a href="/java-arraylist">arrayliste</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="//ko.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>