Cara-cara yang mungkin dilakukan:
<pre> ... </pre>
atau
style="white-space:pre"
Ada lagi?
Dalam kasus di mana lebar/tinggi ruang melebihi
, biasanya saya gunakan:
Untuk spacer horizontal:
<span style="display:inline-block; width: YOURWIDTH;"></span>
Untuk spacer vertikal:
<span style="display:block; height: YOURHEIGHT;"></span>
Anda dapat menggunakan
untuk spasi, <
untuk <
(kurang dari, nomor entitas <
) dan >
untuk >
(lebih besar dari, nomor entitas >
).
Daftar lengkapnya dapat ditemukan di Entitas HTML.
Mencoba  
.
Sesuai dokumentasi di Karakter Khusus:
entitas karakter
 
dan 
menunjukkan en ruang dan em ruang masing-masing, di mana en ruang adalah setengah ukuran titik dan em ruang adalah sama dengan titik ukuran font saat ini. Untuk fixed pitch font, agen pengguna dapat mengobati en ruang sebagai setara dengan karakter spasi, dan em ruang sebagai setara dengan dua ruang karakter.
Jenis Ruang
di HTML
Menciptakan empat spasi antara teks-  
Menciptakan dua spasi antara teks -  
Menciptakan ruang biasa antara teks -
menciptakan ruang yang sempit ( mirip dengan ruang biasa tapi sedikit perbedaan -
"&thinsp";
jarak antara kalimat - "</br>"
Link ini mungkin bisa membantu anda. Check out [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>
Baris pertama paragraf ini akan menjorok ke dalam sekitar lima karakter, mirip dengan indentasi tab.
Lihat *Cara Menggunakan HTML dan CSS untuk Membuat Tab dan Spasi untuk informasi lebih lanjut.
Pergi langkah lebih lanjut dari @Ivar dan gaya saya sendiri kustom tag seperti jadi... Bagi saya 'tab' lebih mudah untuk mengingat dan jenis.
tab {
display: inline-block;
margin-left: 40px;
}
Dan HTML pelaksanaan...
<p>Left side of the whitespace<tab>Right side of the whitespace</p>
Dan saya screenshot...
Jika anda're meminta tab untuk menyelaraskan hal-hal dalam beberapa baris, anda dapat menggunakan <table>
.
Menempatkan masing-masing baris di <tr> ... </tr>
. Dan masing-masing elemen dalam baris yang di <td> ... </td>
. Dan tentu saja anda selalu dapat mengontrol padding setiap sel tabel untuk menyesuaikan ruang di antara mereka.
Ini akan membuat mereka sejajar dan mereka akan terlihat cukup bagus :)
Atau disebut sebagai ruang tetap atau hard ruang, non-breaking space (NBSP) digunakan dalam pemrograman dan pengolah kata untuk membuat ruang dalam garis yang tidak dapat rusak oleh word wrap.
Dengan HTML,
memungkinkan anda untuk membuat beberapa ruang yang terlihat pada halaman web dan tidak hanya dalam kode sumber.
Anda dapat menggunakan kode ini  
untuk menambahkan ruang di dalam konten HTML. Untuk tab ruang, gunakan 5 kali atau lebih.
Cek contoh di sini: https://www.w3schools.com/charsets/tryit.asp?deci=8287&ent=ThickSpace
Menggunakan standar CSS tab-size
.
Untuk menyisipkan tab simbol (jika standar tombol tab, pindah kursor) tekan Alt + 0 + 0 + 9
css .elemen { -moz-tab-ukuran: 4; tab-ukuran: 4; }
Pilihan saya:
css *{-moz-tab-size: 1; tab-size: 1;}
Lihat cuplikan atau cepat ditemukan misalnya di 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>
Ruang putih? Tidak't anda hanya menggunakan padding? Itu adalah ide. Itu adalah bagaimana anda dapat menambahkan beberapa "area kosong" seluruh elemen anda. Sehingga anda dapat menggunakan tag CSS berikut:
padding: 5px;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 5px;
padding-right: 5px;
Ini bekerja untuk saya:
Di CSS saya yang saya punya:
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; }
Maka di HTML saya hanya menggunakan tab saya:
Dog Food <tab3> :$30
Milk <tab3> :$3
Pizza Kit <tab3> :$5
Mt Dew <tab3> :$1.75
user8657661's jawaban adalah yang paling dekat untuk kebutuhan saya (lapisan hal-hal di beberapa baris). Namun, saya tidak't mendapatkan contoh kode untuk bekerja seperti yang disediakan, tapi aku yang diperlukan untuk perubahan itu sebagai berikut:
<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>
Jika anda perlu benar-blok angka yang anda dapat mengubah kiri:150px
ke kanan:150px
, tapi anda'll perlu mengubah nomor yang didasarkan pada lebar layar (seperti yang tertulis angka-angka akan menjadi 150 piksel dari tepi kanan layar).