In diesem Artikel erfahren Sie, wie Sie mithilfe von Leerzeichen/Tabulatoren in Text einfügen HTML Und CSS . Da wir wissen, dass HTML standardmäßig nicht mehr als ein Leerzeichen unterstützt, benötigen wir einige zusätzliche Attribute oder CSS, um zusätzlichen Abstand zwischen dem Text zu schaffen.
Dies sind die folgenden Ansätze, mit denen wir Leerzeichen/Tabulatoren in Text einfügen können:
Inhaltsverzeichnis
- Verwendung der HTML-Entitäten
- Verwendung der Tab-Size-Eigenschaft in CSS
- Benutzerdefiniertes CSS verwenden
Verwendung der HTML-Entitäten
- Der Die Zeichenentität wird verwendet, um ein geschütztes Leerzeichen zu kennzeichnen, bei dem es sich um ein festes Leerzeichen handelt. Dies kann als doppelt so groß wie ein normaler Raum wahrgenommen werden. Es wird verwendet, um in einer Zeile ein Leerzeichen zu erzeugen, das nicht durch Zeilenumbruch unterbrochen werden kann.
- Der Die Zeichenentität wird verwendet, um ein „En“-Leerzeichen zu kennzeichnen, das die halbe Punktgröße der aktuellen Schriftart bedeutet. Dies kann als doppelt so groß wie ein normaler Raum wahrgenommen werden.
- Der Die Zeichenentität wird verwendet, um ein „em“-Leerzeichen zu kennzeichnen, das der Punktgröße der aktuellen Schriftart entspricht. Dies kann als viermal so groß wie ein normaler Raum wahrgenommen werden.
Syntax
// Regular space // Two spaces gap // Four spaces gap>
Beispiel: In diesem Beispiel werden wir sehen, wie Leerzeichen verwendet werden. Bitte vergessen Sie nicht, Folgendes hinzuzufügen: , und &emsp im Code, wo Sie Leerzeichen zwischen dem Text hinzufügen müssen.
html Wie füge ich mit HTML/CSS Leerzeichen/Tabulatoren in Text ein? Titel> Kopf> <body> <h1 style='color: green'>techcodeview.comh1> <b>Wie füge ich mit HTML/CSS Leerzeichen/Tabulatoren in Text ein?b><p>Dies ist ein reguläres Leerzeichen.p><p>Dies ist eine Lücke von zwei Leerzeichen.p><p>Dies ist ein Vier-Leerzeichen-Gap.p> body> html>></pre> </code> <p dir='ltr'> <b> <strong>Ausgabe:</strong> </b> </p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/java-string-contains">Java enthält Teilzeichenfolge</a>
</blockquote> <img src='//techcodeview.com/img/css-questions/66/how-insert-spaces-tabs-text-using-html.webp' alt="Wohltätigkeitsorganisationen"><h2 id='using-the-tabsize-property-in-css'> <b> <strong>Verwenden der tab-size-Eigenschaft in CSS</strong> </b> </h2><p dir='ltr'><span>Der</span> <span>tab-size-Eigenschaft in CSS</span> <span>wird verwendet, um die Anzahl der Leerzeichen auf jedem Tabulatorzeichen festzulegen, das angezeigt wird. Wenn Sie diesen Wert ändern, können Sie auf einem Tabulatorzeichen die benötigte Menge an Leerzeichen einfügen. Diese Methode funktioniert jedoch nur mit vorformatiertem Text (mit</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>Wie füge ich mit HTML/CSS Leerzeichen/Tabulatoren in Text ein? Titel><style>.tab1 { tab-size: 2; } .tab2 { tab-size: 4; } .tab4 { tab-size: 8; } style> head> <body> <h1 style='color: green'>techcodeview.comh1> <b>Wie füge ich mit HTML/CSS Leerzeichen/Tabulatoren in Text ein?b><pre class='hljs'zalupa>Dies ist eine Registerkarte mit 2 Leerzeichen.pre><pre class='hljs'zalupa>Dies ist eine Registerkarte mit 4 Leerzeichen.pre><pre class='hljs'zalupa>Dies ist eine Registerkarte mit 8 Leerzeichen.pre> body> html> Ausgabe: Benutzerdefiniertes CSS verwenden Eine neue Klasse kann erstellt werden, die mithilfe der Eigenschaft margin-left einen bestimmten Abstand vorgibt. Der Platzbedarf kann durch die in dieser Eigenschaft angegebene Anzahl von Pixeln angegeben werden. Die Anzeigeeigenschaft ist außerdem auf „inline-block“ gesetzt, sodass nach dem Element kein Zeilenumbruch eingefügt wird. Dadurch kann der Raum neben Text und anderen Elementen platziert werden. Syntax .tab { display: inline-block; margin-left: Wert; /* für z.B.: value = 40px*/ } Beispiel: In diesem Beispiel werden wir die oben erläuterte Methode implementieren. html<html> <head> <title>Wie füge ich mit HTML/CSS Leerzeichen/Tabulatoren in Text ein? Titel><style>.tab { display: inline-block; Rand links: 40px; } style> head> <body> <h1 style='color: green'>techcodeview.comh1> <b>Wie füge ich mit HTML/CSS Leerzeichen/Tabulatoren in Text ein?b><p>Das ist ein<span>span>Tab-Leerzeichen im Dokument.p> body> html> Ausgabe:></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="">Kategorie</h2>
<div class="content">
<ul class="list-unstyled">
<li> <a href="/pyspark-tutorial/">Pyspark-Tutorial</a> </li><li> <a href="/cpp-input-output/">Cpp-Eingabe-Ausgabe</a> </li><li> <a href="/technical-scripter/">Technischer Skripter</a> </li><li> <a href="/cpp-multithreading/">Cpp-Multithreading</a> </li><li> <a href="/docker-container/">Docker-Container</a> </li><li> <a href="/ancient-history/">Alte Geschichte</a> </li><li> <a href="/ecology/">Ökologie</a> </li><li> <a href="/apache-ant-tutorial/">Apache Ant-Tutorial</a> </li><li> <a href="/interview-experiences/">Interviewerfahrungen</a> </li><li> <a href="/java-classes/">Java-Klassen</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">Python | os.makedirs()-Methode</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Ein Informatikportal für Geeks. Es enthält gut geschriebene, gut durchdachte und gut erklärte Informatik- und Programmierartikel, Quizfragen und Fragen zu Übungs-/Wettbewerbsprogrammier-/Firmenvorstellungsgesprächen.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/python-os-makedirs-method"> <i class="fa fa-external-link"></i> Weiterlesen</a> </p>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="languages aside section">
<div class="section-inner">
<h2 class="heading">Interessante Artikel</h2>
<div class="content">
<ul class="list-unstyled">
<li class="item">
<span class="title"> <strong> <a href="/how-write-pseudo-code">Wie schreibe ich einen Pseudocode?</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/what-is-32-degrees-celsius-fahrenheit">Was sind 32 Grad Celsius in Fahrenheit?</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/floyd-warshall/">Floyd-Warshall</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/7-strong-acids-131784">Die 7 starken Säuren</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/whats-difference-131384">Was ist der Unterschied? Gewichteter vs. ungewichteter GPA</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">Beliebte Beiträge</h2>
<div class="content">
<ul class="list"> <li><a href="/nick-pulos">Nur Nick</a>
</li><li><a href="/java-tostring-method">Java-Tostring-Methode</a>
</li><li><a href="/difference-between-union">Gewerkschaft vs. Gewerkschaft alle</a>
</li><li><a href="/roman-number-1-100">1 bis 100 römische Nr</a>
</li><li><a href="/android-easter-egg">Ostereier in Android</a>
</li><li><a href="/java-convert-int-string">Java-String in int</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 Rechte Vorbehalten | <a href="//fi.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Haftungsausschluss</a> | <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Über Uns</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Datenschutzrichtlinie</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>