I den här artikeln kommer vi att lära oss hur du lägger till mellanslag/flikar i text med hjälp av HTML och CSS . Eftersom vi vet att HTML inte stöder mer än ett blanksteg som standard, det är därför vi behöver några extra attribut eller CSS för att få extra utrymme mellan texten.
Det här är följande tillvägagångssätt genom att använda dessa kan vi lägga till mellanslag/flikar i text:
Innehållsförteckning
Använda HTML-entiteter
- De teckenentitet används för att beteckna ett icke-brytande mellanslag som är ett fast mellanslag. Detta kan uppfattas som dubbelt så stort utrymme som ett normalt utrymme. Den används för att skapa ett mellanslag i en rad som inte kan brytas av ordlindning.
- De teckenentitet används för att beteckna ett 'en'-mellanslag, vilket betyder en halv punktstorlek av det aktuella teckensnittet. Detta kan uppfattas som dubbelt så stort utrymme som ett normalt utrymme.
- De teckenentitet används för att beteckna ett 'em'-mellanslag vilket betyder lika med punktstorleken för det aktuella teckensnittet. Detta kan uppfattas som fyra gånger så stort utrymme som ett normalt utrymme.
Syntax
// Regular space // Two spaces gap // Four spaces gap>
Exempel: I det här exemplet ska vi se hur man använder mellanslag och glöm inte att lägga till, , och &emsp i kod där du behöver lägga till mellanslag mellan texten.
html Hur infogar man mellanslag/tabbar i text med HTML/CSS? titel> huvud> <body> <h1 style='color: green'>techcodeview.comh1> <b>Hur man infogar mellanslag/tabbar i text med HTML/CSS?b><p>Detta är ett vanligt space.p><p>Detta är en två mellanslag gap.p><p>Detta är en fyra blanksteg 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="/shilpa-shetty">shilpa shetty ålder</a>
</blockquote> <img src='//techcodeview.com/img/css-questions/66/how-insert-spaces-tabs-text-using-html.webp' alt="välgörenhetsenheter"><h2 id='using-the-tabsize-property-in-css'> <b> <strong>Använda egendom i tabbstorlek i CSS</strong> </b> </h2><p dir='ltr'><span>De</span> <span>tab-size-egenskap i CSS</span> <span>används för att ställa in antalet blanksteg på varje tabbtecken som ska visas. Genom att ändra detta värde kan du infoga den mängd utrymme som behövs på ett tabbtecken. Denna metod fungerar dock bara med förformaterad text (med</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>Hur infogar man mellanslag/tabbar i text med HTML/CSS? titel><style>.tab1 { tab-size: 2; } .tab2 { tab-size: 4; } .tab4 { tab-size: 8; } stil> huvud> <body> <h1 style='color: green'>techcodeview.comh1> <b>Hur man infogar mellanslag/tabbar i text med HTML/CSS?b><pre class='hljs'zalupa>Detta är en flik med 2 spaces.pre><pre class='hljs'zalupa>Detta är en flik med 4 spaces.pre><pre class='hljs'zalupa>Detta är en flik med 8 spaces.pre> body> html> Output: Använda anpassad CSS En ny klass kan skapas som ger ett visst mått av mellanrum genom att använda egenskapen margin-left. Mängden utrymme kan ges av antalet pixlar som anges i den här egenskapen. Visningsegenskapen är också inställd på 'inline-block' så att ingen radbrytning läggs till efter elementet. Detta gör att utrymmet kan sitta bredvid text och andra element. Syntax .tab { display: inline-block; margin-left: värde; /* för t.ex.: värde = 40px*/ } Exempel: I det här exemplet ska vi implementera den ovan förklarade metoden. html<html> <head> <title>Hur infogar man mellanslag/tabbar i text med HTML/CSS? titel><style>.tab { display: inline-block; marginal-vänster: 40px; } stil> huvud> <body> <h1 style='color: green'>techcodeview.comh1> <b>Hur man infogar mellanslag/tabbar i text med HTML/CSS?b><p>Det här är en<span>span>tabutrymme 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="/biology-difference-between/">Biologi-Skillnad-Mellan</a> </li><li> <a href="/java-abstract-class/">Java-Abstract Klass Och Gränssnitt</a> </li><li> <a href="/mysql-tutorial/">Mysql Handledning</a> </li><li> <a href="/http-headers/">Http-Huvuden</a> </li><li> <a href="/linux-networking/">Linux Nätverk</a> </li><li> <a href="/computer-gk/">Dator Gk</a> </li><li> <a href="/java-strings/">Java-Strängar</a> </li><li> <a href="/pc-tips/">Pc-Tips</a> </li><li> <a href="/physics-class-11-cat/">Fysik-Klass-11</a> </li><li> <a href="/english-questions/">Engelska Frågor</a> </li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//aside-->
<aside class="testimonials aside section">
<div class="section-inner">
<h2 class="heading">Företagslista</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Företagslista</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/companies-list/"> <i class="fa fa-external-link"></i> Läs Mer</a> </p>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="languages aside section">
<div class="section-inner">
<h2 class="heading">Intressanta Artiklar</h2>
<div class="content">
<ul class="list-unstyled">
<li class="item">
<span class="title"> <strong> <a href="/python-sys/">Python-Sys</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/best-summary-analysis-1311476">Bästa sammanfattning och analys: The Great Gatsby, kapitel 4</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/what-is-1-5-fraction">Vad är 1,5 som en bråkdel?</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/12-months-name-english">12 månaders namn på engelska och hindi</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/difference-between-compound">Skillnaden mellan förening och blandning</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ära Inlägg</h2>
<div class="content">
<ul class="list"> <li><a href="/madhuri-dixit">Madhuri sa kom igen</a>
</li><li><a href="/loops-java">för loop i java</a>
</li><li><a href="/java-math-random-method">math.random java</a>
</li><li><a href="/typescript-foreach">maskinskriven för varje</a>
</li><li><a href="/store-program-control-concept">lagrad programkontroll</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 Alla Rättigheter Förbehållna | <a href="//tr.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Ansvarsfriskrivning</a> | <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Om Oss</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Sekretesspolicy</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>