Cara memasukkan spasi / tab dalam teks menggunakan HTML / CSS

Cara yang mungkin:

<pre> ... </pre>

atau

style="white-space:pre"

Ada yang lain?

Untuk memasukkan tab spaceantara dua kata / kalimat yang biasa saya gunakan

  dan  

Dalam kasus di mana lebar / tinggi ruang berada di luar   biasanya saya gunakan:

Untuk pengatur jarak horizontal:

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

Untuk pengatur jarak vertikal:

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

Anda dapat menggunakan  spasi, <untuk <(kurang dari, nomor entitas <) dan >untuk >(lebih dari, nomor entitas> ).

Daftar lengkap dapat ditemukan di Entitas HTML .

Coba  .

Sesuai dokumentasi di Karakter Khusus :

Karakter entitas  dan  masing-masing menunjukkan en spasi dan ruang em, di mana ruang en adalah setengah ukuran titik dan ruang em sama dengan ukuran titik font saat ini. Untuk font pitch tetap, agen pengguna dapat memperlakukan en space sebagai setara dengan karakter spasi, dan ruang em sebagai setara dengan dua karakter spasi.

Saya suka menggunakan ini:

Di CSS Anda:

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

Di HTML Anda:

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

Jenis dari Spaces dalam HTML

Menciptakan empat spasi di antara teks-  

Membuat dua spasi di antara teks -  

Membuat ruang reguler di antara teks -  

menciptakan ruang sempit (mirip dengan ruang biasa tetapi sedikit perbedaan - "&thinsp";

jarak antar kalimat - "</br>"

Tautan ini mungkin membantu Anda. Lihat [ 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 di-indentasi sekitar lima karakter, mirip dengan indentasi tab.

Lihat Cara Menggunakan HTML dan CSS untuk Membuat Tab dan Spasi untuk informasi lebih lanjut.

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

Anda juga bisa menggunakan:

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

Selangkah lebih maju dari @Ivar dan beri style pada tag kustom saya sendiri seperti itu ... Bagi saya 'tab' lebih mudah diingat dan diketik.

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

Dan implementasi HTML ...

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

Dan tangkapan layar saya ...

Jika Anda meminta tab untuk meluruskan hal-hal di beberapa baris, Anda dapat menggunakannya <table>.

Masukkan setiap baris <tr> ... </tr>. Dan setiap elemen dalam baris dalam <td> ... </td>. Dan tentu saja Anda selalu dapat mengontrol bantalan 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 ruang keras, non-breaking space (NBSP) digunakan dalam pemrograman dan pengolah kata untuk membuat ruang dalam garis yang tidak dapat dipecah oleh bungkus kata.

Dengan HTML,  Anda dapat membuat banyak ruang yang terlihat di halaman web dan tidak hanya dalam kode sumber.

Ruang putih? Tidak bisakah Anda menggunakan bantalan? Itu ide. Itulah cara Anda dapat menambahkan "area kosong" di sekitar elemen Anda. Jadi, Anda dapat menggunakan tag CSS berikut:

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

Anda dapat menggunakan kode ini  untuk menambahkan spasi di konten HTML. Untuk ruang tab, gunakan 5 kali atau lebih.

Lihat contoh di sini: https://www.w3schools.com/charsets/tryit.asp?deci=8287&ent=ThickSpace

Gunakan CSS standar tab-size .

Untuk menyisipkan simbol tab (jika tombol tab standar, gerakkan kursor) tekan Alt+ 0+ 0+9

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

Pilihan saya:

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

Lihatlah potongan atau contoh cepat yang ditemukan di ukuran tab .

.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>

Ini bekerja untuk saya:

Di CSS saya, 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; }

Kemudian di HTML saya hanya menggunakan tab saya:

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

jawaban pengguna8657661 adalah yang paling dekat dengan kebutuhan saya (berbaris di beberapa baris). Namun, saya tidak bisa mendapatkan kode contoh berfungsi sebagaimana disediakan, tetapi saya perlu mengubahnya 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 membutuhkan nomor kanan-blok Anda dapat mengubah left:150pxke right:150px, tapi Anda harus mengubah nomor berdasarkan lebar layar (seperti yang tertulis angka-angka akan 150 piksel dari tepi kanan layar).

Anda dapat melakukan melalui padding like <span style="padding-left: 20px;">, Anda dapat memeriksa lebih banyak cara di sini di - ruang kosong di html

Berikut ini adalah teks "Tab" (salin dan tempel): ""

Ini mungkin tampak berbeda atau tidak tab penuh karena keterbatasan jawaban situs ini.