Comment insérer des espaces/des onglets dans un texte en utilisant HTML/CSS?
Façons possibles:
<pre> ... </pre>
ou
style="white-space:pre"
Rien d'autre?
Pour insérer tab space entre deux mots/phrases que j'utilise habituellement
  et  
dans les cas où la largeur/hauteur de l'espace est au-delà de que j'utilise habituellement
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 est disponible à cette adresse: http://www.w3schools.com/html/html_entities.asp
essayez  
Selon les documents sur https://www.w3.org/MarkUp/html3/specialchars.html
Les entités de caractères
 et désignent un espace en et un em space respectivement, où un espace en est égal à la moitié de la taille du point et un em l'espace est égal à la taille en points de la police actuelle. Pour un pas fixe Dans le cas des polices, l'agent utilisateur peut traiter l'espace en ligne comme étant équivalent à A caractère d'espace, et l'espace em équivalent à deux espaces personnages.
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>
<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 en onglets
Voir ici pour plus d'informations
Types de Spaces en HTML
Crée quatre espaces entre le texte-  
Crée deux espaces entre le texte -  
Crée un espace normal entre le texte -
crée un espace étroit (similaire à un espace normal 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]
<span style="padding-left:68px;"></span>Vous pouvez également utiliser padding-left padding-right padding-top padding-bottom
Si vous demandez des tabulations pour aligner les éléments dans certaines lignes, vous pouvez utiliser <table>
mettre chaque ligne dans <tr> ... </tr>
et chaque élément à l'intérieur de cette ligne dans <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 auront l'air joli Nice :)
Pourquoi ne pas aller plus loin que @Ivar et styliser ma propre balise personnalisée de la manière suivante ... Pour moi, l'onglet est plus facile à mémoriser et à saisir.
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 ...
Alternativement appelé espace fixe ou espace dur, NBSP (Non-Breaking SPace) est utilisé dans la programmation et le traitement de texte pour créer un espace dans une ligne qui ne peut pas être divisé par le retour à la ligne. Avec HTML, vous permet de créer plusieurs espaces visibles sur une page Web et pas seulement dans le code source.
Espace blanc, vous ne pouvez pas simplement utiliser un rembourrage? C'est une idée, désolé, si je ne comprends pas bien, mais c'est comme cela 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;
Encore une fois désolé si ce n'est pas ce que vous recherchiez.
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; }
puis dans le HTML, j'utilise juste mes onglets:
Dog Food <tab3> :$30
Milk <tab3> :$3
Pizza Kit <tab3> :$5
Mt Dew <tab3> :$1.75
la réponse de user8657661 correspond le mieux à mes besoins (aligner les éléments sur plusieurs lignes.) Cependant, je ne pouvais pas obtenir le code d'exemple comme il avait été fourni, mais je devais 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:150px en right:150px, mais vous devrez modifier le nombre en fonction de la largeur de l'écran (comme indiqué, les nombres seraient à 150 pixels du bord droit de l'écran.)
Vous pouvez utiliser ce code   pour ajouter un espace dans le code HTML. Pour les tabulations, utilisez-le au moins 5 fois. Vérifiez ici: https://www.w3schools.com/charsets/tryit.asp?deci=8287&ent=ThickSpace
pourquoi pas css standard tab-size?
pour insérer le symbole de tabulation (si la touche de tabulation standard déplace 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;}
regarder un extrait ou
exemple rapide
https://css-tricks.com/almanac/properties/t/tab-size/
.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>