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="/access-modifiers/">Adgangsmodifikatorer</a> </li><li> <a href="/java-networking/">Java Netværk</a> </li><li> <a href="/differences/">Forskelle</a> </li><li> <a href="/unity-tutorial/">Unity Tutorial</a> </li><li> <a href="/cpp-data-types/">Cpp-Data-Typer</a> </li><li> <a href="/c-data-types/">C-Datatyper</a> </li><li> <a href="/hash/">Hash</a> </li><li> <a href="/pandas-tutorial/">Tutorial For Pandaer</a> </li><li> <a href="/banking-english/">Banking Engelsk</a> </li><li> <a href="/cryptography/">Kryptografi</a> </li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//aside-->
<aside class="testimonials aside section">
<div class="section-inner">
<h2 class="heading">De 11 opløselighedsregler og hvordan man bruger dem</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Hvad er reglerne for kemi opløselighed? Tjek vores diagram over opløselighedsregler og komplette guide til disse vigtige principper.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/11-solubility-rules-131166"> <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="/what-is-montessori-school-1311324">Hvad er en Montessoriskole? 7 nøgleprincipper i Montessori-uddannelse</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/linux-telnet-command">Linux telnet kommando</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/free-older-official-act-practice-tests-1311262">Gratis ældre officielle ACT-øvelsesprøver</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/binary-division">Binær division</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/ad-vs-bc">AD vs BC</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="/java-escape-characters">escape karakter java</a>
</li><li><a href="/json-example">json-format eksempel</a>
</li><li><a href="/java-string-valueof">string.valueof</a>
</li><li><a href="/examples-dfa">eksempler på dfa automater</a>
</li><li><a href="/css-selector">hvad er selectors i css</a>
</li><li><a href="/pete-davidson">pete davidson nationalitet</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="//de.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>