Dans cet article, nous apprendrons comment ajouter des espaces/tabulations dans le texte en utilisant HTML et CSS . Comme nous savons que HTML ne prend pas en charge plus d'un espace par défaut, c'est pourquoi nous avons besoin de quelques attributs supplémentaires ou CSS pour obtenir un espace supplémentaire entre le texte.
Voici les approches suivantes. En les utilisant, nous pouvons ajouter des espaces/tabulations dans le texte :
Table des matières
- Utilisation des entités HTML
- Utilisation de la propriété tab-size en CSS
- Utiliser du CSS personnalisé
Utilisation des entités HTML
- Le L'entité de caractère est utilisée pour désigner un espace insécable qui est un espace fixe. Cela peut être perçu comme deux fois l’espace d’un espace normal. Il est utilisé pour créer un espace dans une ligne qui ne peut pas être rompu par un retour à la ligne.
- Le L'entité de caractère est utilisée pour désigner un espace « en », ce qui signifie la moitié de la taille en points de la police actuelle. Cela peut être perçu comme deux fois l’espace d’un espace normal.
- Le L’entité de caractère est utilisée pour désigner un espace « em », ce qui signifie égal à la taille en points de la police actuelle. Cela peut être perçu comme quatre fois l’espace d’un espace normal.
Syntaxe
// Regular space // Two spaces gap // Four spaces gap>
Exemple: Dans cet exemple, nous allons voir comment utiliser les espaces et n'oubliez pas d'ajouter , , et &emsp dans le code où vous devez ajouter un espace entre le texte.
HTML Comment insérer des espaces/tabulations dans du texte en utilisant HTML/CSS ? titre> tête> <body> <h1 style='color: green'>techcodeview.comh1> <b>Comment insérer des espaces/tabulations dans du texte en utilisant HTML/CSS ?b><p>Ceci est un espace régulier.p><p>Il s'agit d'un écart de deux espaces.p><p>Il s'agit d'un espace de quatre espaces.p> body> html>></pre> </code> <p dir='ltr'> <b> <strong>Sortir:</strong> </b> </p> <br /> <div id="container-4ae8242bd8e42d94c5c0bf390d5144e6"></div><br /><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/roman-number-1-100">chiffre romain 1 à 100</a>
</blockquote> <img src='//techcodeview.com/img/css-questions/66/how-insert-spaces-tabs-text-using-html.webp' alt="entités charitables"><h2 id='using-the-tabsize-property-in-css'> <b> <strong>Utilisation de la propriété tab-size en CSS</strong> </b> </h2><p dir='ltr'><span>Le</span> <span>propriété tab-size en CSS</span> <span>est utilisé pour définir le nombre d'espaces sur chaque caractère de tabulation qui s'affichera. Changer cette valeur permet d'insérer la quantité d'espace nécessaire sur un caractère de tabulation. Cette méthode ne fonctionne cependant qu'avec du texte préformaté (en utilisant</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>Comment insérer des espaces/tabulations dans du texte en utilisant HTML/CSS ? titre><style>.tab1 { taille de la tabulation : 2 ; } .tab2 { taille de la tabulation : 4 ; } .tab4 { taille de la tabulation : 8 ; } style> tête> <body> <h1 style='color: green'>techcodeview.comh1> <b>Comment insérer des espaces/tabulations dans du texte en utilisant HTML/CSS ?b><pre class='hljs'zalupa>Ceci est un onglet avec 2 espaces.pre><pre class='hljs'zalupa>Ceci est un onglet avec 4 espaces.pre><pre class='hljs'zalupa>Il s'agit d'un onglet avec 8 espaces.pre> body> html> Sortie : utilisation de CSS personnalisé Une nouvelle classe peut être créée qui donne un certain espacement en utilisant la propriété margin-left. La quantité d'espace peut être donnée par le nombre de pixels spécifié dans cette propriété. La propriété display est également définie sur « inline-block » afin qu'aucun saut de ligne ne soit ajouté après l'élément. Cela permet à l'espace de s'asseoir à côté du texte et d'autres éléments. Syntaxe .tab { display: inline-block; marge gauche : valeur ; /* pour par exemple : value = 40px*/ } Exemple : Dans cet exemple, nous allons implémenter la méthode expliquée ci-dessus. HTML<html> <head> <title>Comment insérer des espaces/tabulations dans du texte en utilisant HTML/CSS ? titre><style>.tab { affichage : bloc en ligne ; marge gauche : 40 px ; } style> tête> <body> <h1 style='color: green'>techcodeview.comh1> <b>Comment insérer des espaces/tabulations dans du texte en utilisant HTML/CSS ?b><p>C'est un<span>span>espace de tabulation dans le document.p> body> html> Sortie :></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="">Catégorie</h2>
<div class="content">
<ul class="list-unstyled">
<li> <a href="/microsoft/">Microsoft</a> </li><li> <a href="/godot-tutorial/">Tutoriel Godot</a> </li><li> <a href="/information-security/">Sécurité De L'information</a> </li><li> <a href="/red-black-tree/">Arbre Noir Rouge</a> </li><li> <a href="/pandas-tutorial/">Tutoriel Pandas</a> </li><li> <a href="/cell-biology/">Biologie Cellulaire</a> </li><li> <a href="/automata-tutorial/">Tutoriel Automatique</a> </li><li> <a href="/strings/">Cordes</a> </li><li> <a href="/python-array/">Tableau Python</a> </li><li> <a href="/bash-tutorial/">Tutoriel Bash</a> </li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//aside-->
<aside class="testimonials aside section">
<div class="section-inner">
<h2 class="heading">Classe de tableau en C++</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> L'introduction de la classe array à partir de C++11 a offert une meilleure alternative aux tableaux de style C. Les avantages de la classe tableau par rapport au tableau de style C sont : -</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/array-class-in-c"> <i class="fa fa-external-link"></i> Lire La Suite</a> </p>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="languages aside section">
<div class="section-inner">
<h2 class="heading">Des Articles Intéressants</h2>
<div class="content">
<ul class="list-unstyled">
<li class="item">
<span class="title"> <strong> <a href="/introduction-linux-shell">Introduction au Linux Shell et aux scripts Shell</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/jquery-submit">jQuery soumettre()</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/explained-what-is-simsimi-24268">Expliqué : Qu'est-ce que SimSimi ?</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/java-integer-valueof-method">Méthode Java Integer valueOf()</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/best-pilots-world">Meilleurs pilotes du monde</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">Articles Populaires</h2>
<div class="content">
<ul class="list"> <li><a href="/gimp-heal-tool">outil de guérison</a>
</li><li><a href="/java-string">méthodes de chaîne en Java</a>
</li><li><a href="/immutable-list-java">liste immuable</a>
</li><li><a href="/base64-decoding-javascript">décoder le javascript base64</a>
</li><li><a href="/java-scanner">scanner scanner java</a>
</li><li><a href="/how-wrap-text-css">texte d'habillage CSS</a>
</li><li><a href="/java-convert-boolean-string">booléen pour chaîner 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 Tous Les Droits Sont Réservés | <a href="//sr.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Clause De Non-Responsabilité</a> | <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">A Propos De Nous</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Politique De Confidentialité</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>