私が通常使用する2つの単語/文の間にtab spaceを挿入する
 と 
スペースの幅/高さが を超えている場合
水平スペーサー用：
<span style="display:inline-block; width: YOURWIDTH;"></span>
垂直スペーサー用：
<span style="display:block; height: YOURHEIGHT;"></span>
スペースには 、<には<（エンティティ番号<より小さい）、>には>（エンティティ番号>より大きい）を使用できます。
完全なリストは、このアドレスにあります。 http://www.w3schools.com/html/html_entities.asp
 を試す
のドキュメントに従って - https://www.w3.org/MarkUp/html3/specialchars.html
エンティティー
 と はそれぞれenスペースとemスペースを表します。ここで、enスペースはポイントサイズの半分、emスペースは現在のフォントのポイントサイズと同じです。固定ピッチフォントの場合、ユーザーエージェントはenスペースをAスペース文字に相当するものとして扱い、emスペースを2つのスペース文字に相当するものとして扱うことができます。
私はこれを使うのが好きです。
あなたのCSSでは：
.tab {
display:inline-block;
margin-left: 40px;
}
あなたのHTMLでは：
<p>Some Text <span class="tab">Tabbed Text</span></p>
HTMLにおけるSpacesの種類
テキストの間に4つのスペースを作成します -  
テキストの間に2つのスペースを作成します -  
テキストの間に通常のスペースを作成します -
狭いスペースを作成します（通常のスペースに似ていますが、わずかな違いはあります - "&thinsp";
文の間隔 - "</br>"
このリンクは役に立つかもしれません。 [ 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>
この段落の最初の行は、タブ付きインデントのように、5文字ほど字下げされます。
ここ を参照してください。
<span style="padding-left:68px;"></span>あなたはpadding-left padding-right padding-top padding-bottomも使うことができます
タブをいくつかの行に並べるために<table>を使うことができます。
各行を<tr> ... </tr>に入れる
<td> ... </td>内のその行内の各要素
もちろん、各テーブルセルの間隔を調整してそれらの間のスペースを調整することもできます。
これはそれらを整列させるでしょう、そして彼らはかなり素敵に見えるでしょう:)
@Ivarよりさらに一歩進んで自分のカスタムタグをそのようにスタイルしてみてください。
tab {
display: inline-block;
margin-left: 40px;
}
そしてHTMLの実装...
<p>Left side of the whitespace<tab>Right side of the whitespace</p>
そして私のスクリーンショット...
固定スペースまたはハードスペースとも呼ばれるNon-Breaking SPace（NBSP）は、ワードラップで分割できないスペースを1行に作成するためにプログラミングおよびWord処理で使用されます。 HTMLでは、 を使用すると、ソースコードだけでなくWebページに表示される複数のスペースを作成できます。
余白、パディングだけを使うことはできませんか？これが正しいことではない場合は、申し訳ありませんが、残念ながら、要素の周囲に "空白の領域"を追加することができます。したがって、次のCSSタグを使用できます。
padding: 5px;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 5px;
padding-right: 5px;
これがあなたがしたことではないならば、もう一度申し訳ありません。
標準のCSS tab-sizeではないのはなぜですか？
タブ記号を挿入するには（標準のタブキーがカーソルを移動する場合）、ALT + 0 + 0 + 9を押します
.element {
-moz-tab-size:4;
tab-size:4;
}
私が好む：
*{-moz-tab-size:1;tab-size:1;}
スニペットや
簡単な例
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>これは私のために働きました：私のCSSでは私が持っています： `
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; }
それからHTMLでは私はただ私のタブを使います：
Dog Food <tab3> :$30
Milk <tab3> :$3
Pizza Kit <tab3> :$5
Mt Dew <tab3> :$1.75
user8657661の答えは私のニーズに最も近い（数行に渡って物事を並べることです）。
<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>
右寄せの数字が必要な場合はleft:150pxをright:150pxに変更できますが、画面の幅に基づいて数字を変更する必要があります（書かれているとおり、数字は画面の右端から150ピクセルになります）。
このコード を使用して、HTMLにスペースを追加できます。タブスペースは5回以上使用してください。ここで確認してください： https://www.w3schools.com/charsets/tryit.asp?deci=8287&ent=ThickSpace