Cara menyisipkan spasi/tab dalam teks menggunakan HTML/CSS

Untuk menyisipkan tab space di antara dua kata/kalimat, saya biasanya menggunakan

  dan  

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.

Saya ingin menggunakan ini:

Di CSS anda:

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

Dalam HTML anda:

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

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.

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

Anda juga dapat menggunakan:

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

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

Berikut ini adalah "Tab" teks (copy dan paste): ", "

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