Comment insérer des espaces / tabulations dans du texte en utilisant HTML / CSS

Moyens possibles:

<pre> ... </pre>

ou

style="white-space:pre"

Rien d'autre?

Pour insérer tab spaceentre deux mots / phrases que j'utilise habituellement

  et  

Dans les cas où la largeur / hauteur de l'espace est au-delà,  j'utilise généralement:

Pour entretoise horizontale:

<span style="display:inline-block; width: YOURWIDTH;"></span>

Pour entretoise verticale:

<span style="display:block; height: YOURHEIGHT;"></span>

Vous pouvez utiliser  pour les espaces, <pour <(inférieur à, numéro d'entité <) et >pour >(supérieur à, numéro d'entité >).

Une liste complète peut être trouvée dans Entités HTML .

Essayez  .

Selon la documentation sur les caractères spéciaux :

Les entités de caractère  et  désignent respectivement un espace en et un espace em, où un espace en est la moitié de la taille en points et un espace em est égal à la taille en points de la police actuelle. Pour les polices à pas fixe, l'agent utilisateur peut traiter l'espace en comme étant équivalent à un caractère d'espace, et l'espace em comme étant équivalent à deux caractères d'espace.

J'aime utiliser ceci:

Dans votre CSS:

.tab { 
       display:inline-block; 
       margin-left: 40px; 
}

Dans votre HTML:

<p>Some Text <span class="tab">Tabbed Text</span></p>

Types de SpacesHTML

Crée quatre espaces entre le texte-  

Crée deux espaces entre le texte -  

Crée un espace régulier entre le texte -  

crée un espace étroit (similaire à un espace régulier mais légère différence - "&thinsp";

espacement entre les phrases - "</br>"

Ce lien pourrait vous aider. Découvrez [ https://hea-www.harvard.edu/~fine/Tech/html-sentences.html]

<p style="text-indent: 5em;">
The first line of this paragraph will be indented about five characters, similar to a tabbed indent.
</p>

La première ligne de ce paragraphe sera en retrait d'environ cinq caractères, semblable à un retrait tabulé.

Voir Comment utiliser HTML et CSS pour créer des onglets et des espacements pour plus d'informations.

<span style="padding-left:68px;"></span>

Vous pouvez aussi utiliser:

padding-left
padding-right
padding-top
padding-bottom

Allez plus loin que @Ivar et stylisez ma propre balise personnalisée comme ça ... Pour moi, «tab» est plus facile à retenir et à taper.

tab {
    display: inline-block;
    margin-left: 40px;
}

Et l'implémentation HTML ...

<p>Left side of the whitespace<tab>Right side of the whitespace</p>

Et ma capture d'écran ...

Si vous demandez des onglets pour aligner des éléments sur certaines lignes, vous pouvez utiliser <table>.

Mettre chaque ligne <tr> ... </tr>. Et chaque élément à l'intérieur de cette ligne <td> ... </td>. Et bien sûr, vous pouvez toujours contrôler le remplissage de chaque cellule du tableau pour ajuster l'espace entre elles.

Cela les rendra alignés et ils seront plutôt beaux :)

Alternativement appelé espace fixe ou espace dur, l'espace insécable (NBSP) est utilisé dans la programmation et le traitement de texte pour créer un espace dans une ligne qui ne peut pas être interrompu par retour à la ligne.

Avec HTML,  vous permet de créer plusieurs espaces qui sont visibles sur une page Web et pas seulement dans le code source.

Espace blanc? Ne pourriez-vous pas simplement utiliser un rembourrage? C'est une idée. C'est ainsi que vous pouvez ajouter une "zone vide" autour de votre élément. Vous pouvez donc utiliser les balises CSS suivantes:

padding: 5px;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 5px;
padding-right: 5px;

Vous pouvez utiliser ce code  pour ajouter un espace dans le contenu HTML. Pour l'espace de tabulation, utilisez-le 5 fois ou plus.

Consultez un exemple ici: https://www.w3schools.com/charsets/tryit.asp?deci=8287&ent=ThickSpace

Utilisez le CSS standard tab-size.

Pour insérer un symbole de tabulation (si vous utilisez une touche de tabulation standard, déplacez le curseur), appuyez sur Alt+ 0+ 0+9

.element {
    -moz-tab-size: 4;
    tab-size: 4;
}

Mon préféré:

*{-moz-tab-size: 1; tab-size: 1;}

Regardez un extrait ou un exemple trouvé rapidement à la taille de l'onglet .

.t1{
    -moz-tab-size: 1;
    tab-size: 1;
}
.t2{
    -moz-tab-size: 2;
    tab-size: 2;
}
.t4{
    -moz-tab-size: 4;
    tab-size: 4;
}
pre {border: 1px dotted;}

<h3>tab = {default} space</h3>
<pre>
	one tab text
		two tab text
</pre>

<h3>tab = 1 space</h3>
<pre class="t1">
	one tab text
		two tab text
</pre>

<h3>tab = 2 space</h3>
<pre class="t2">
	one tab text
		two tab text
</pre>

<h3>tab = 4 space</h3>
<pre class="t4">
	one tab text
		two tab text
</pre>

Cela a fonctionné pour moi:

Dans mon CSS, j'ai:

tab0  { position:absolute;left:25px;  }
tab1  { position:absolute;left:50px;  }
tab2  { position:absolute;left:75px;  }
tab3  { position:absolute;left:100px; }
tab4  { position:absolute;left:125px; }
tab5  { position:absolute;left:150px; }
tab6  { position:absolute;left:175px; }
tab7  { position:absolute;left:200px; }
tab8  { position:absolute;left:225px; }
tab9  { position:absolute;left:250px; }
tab10 { position:absolute;left:275px; }

Ensuite, dans le HTML, j'utilise simplement mes onglets:

Dog Food <tab3> :$30
Milk <tab3> :$3
Pizza Kit <tab3> :$5
Mt Dew <tab3> :$1.75

La réponse de user8657661 est la plus proche de mes besoins (d'aligner les choses sur plusieurs lignes). Cependant, je n'ai pas pu faire fonctionner l'exemple de code comme prévu, mais j'avais besoin de le modifier comme suit:

<html>
    <head>
        <style>
            .tab9 {position:absolute;left:150px; }
        </style>
    </head>

    <body>
        Dog Food: <span class="tab9"> $30</span><br/>
        Milk of Magnesia:<span class="tab9"> $30</span><br/>
        Pizza Kit:<span class="tab9"> $5</span><br/>
        Mt Dew <span class="tab9"> $1.75</span><br/>
    </body>
</html>

Si vous avez besoin de nombres alignés à droite, vous pouvez changer left:150pxen right:150px, mais vous devrez modifier le nombre en fonction de la largeur de l'écran (comme écrit, les nombres seraient à 150 pixels du bord droit de l'écran).

Vous pouvez le faire grâce au remplissage comme <span style="padding-left: 20px;">, vous pouvez vérifier plus de façons ici à - espace vide en html

Voici un texte "Tabulation" (copier-coller): ""

Il peut apparaître différent ou pas un onglet complet en raison des limitations de réponse de ce site.