HTML / Menambahkan beberapa spasi dengan NBSP dan white-space

Untuk menampilkan beberapa spasi di HTML, gunakan   untuk urutan pendek atau CSS white-space: pre-wrap untuk mempertahankan spasi dan pemisah baris dalam teks. Pilih dengan hati-hati:   juga mencegah pergantian baris otomatis pada posisi tersebut. Untuk spasi antara tombol atau item navigasi, gunakan CSS gap atau margin.

Mengapa beberapa spasi terlihat seperti satu spasi

Dengan pengaturan white-space: normal yang biasa, spasi biasa dan tab berturut-turut di antara kata-kata digabung menjadi satu spasi saat ditampilkan. Indentasi dan baris baru dalam sumber HTML tidak langsung menentukan jarak visual. Baris baru sumber tidak selalu berubah menjadi satu spasi yang terlihat: perlakuannya bisa tergantung pada bahasa dan konteks.

Tempelkan contoh lengkap ini ke dalam editor teks, simpan sebagai spaces.html menggunakan UTF-8, dan buka file tersebut di browser. Tidak diperlukan pustaka atau server. Setelah mengedit, simpan dan segarkan browser. Kata-kata contoh menggunakan huruf Latin sehingga perbedaannya mudah dibandingkan.

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Perbandingan spasi HTML</title>
  <style>
    body { font-family: sans-serif; max-width: 42rem; margin: 1rem auto; padding: 0 1rem; }
    .sample { border: 1px solid #777; padding: .5rem; max-width: 18rem; }
    .preserve { white-space: pre-wrap; }
    .keep { white-space: pre; overflow-x: auto; }
    .lines { white-space: pre-line; }
    .actions { display: flex; flex-wrap: wrap; gap: 1rem; }
  </style>
</head>
<body>
  <h1>Perbandingan spasi HTML</h1>
  <h2>normal</h2>
  <p class="sample">Alpha   Beta       Gamma</p>
  <h2>&amp;nbsp;</h2>
  <p class="sample">Alpha&nbsp;&nbsp;&nbsp;Beta</p>
  <p class="sample">10&nbsp;kg</p>
  <h2>pre-wrap</h2>
  <p class="sample preserve">Alpha   Beta
Gamma   Delta   Epsilon   Zeta   Eta   Theta   Iota</p>
  <h2>pre</h2>
  <p class="sample keep">Alpha   Beta
Gamma   Delta   Epsilon   Zeta   Eta   Theta   Iota</p>
  <h2>pre-line</h2>
  <p class="sample lines">Alpha   Beta
Gamma   Delta   Epsilon   Zeta   Eta   Theta   Iota</p>
  <h2>gap</h2>
  <div class="actions"><button type="button">A</button><button type="button">B</button></div>
</body>
</html>

Dalam paragraf normal, sumbernya mengandung tiga spasi dan kemudian tujuh spasi antara Alpha, Beta, dan Gamma, tetapi setiap urutan biasanya muncul sebagai satu spasi. Pilih paragraf di alat pengembang dan periksa nilai white-space yang dihitung. Ini membedakan karakter dalam sumber dari penggabungan spasi saat rendering.

Menyisipkan spasi tak terputus

  adalah referensi karakter HTML untuk spasi tak terputus, U+00A0. Menulisnya tiga kali menyisipkan tiga karakter yang tidak digabung seperti spasi biasa yang berurutan. Ini juga dapat menjaga agar angka dan satuannya tetap bersama.

<p>Alpha&nbsp;&nbsp;&nbsp;Beta</p>
<p>10&nbsp;kg</p>

Paragraf pertama menempatkan tiga spasi tak terputus antara Alpha dan Beta. Pada paragraf kedua, 10 kg mencegah pemisahan baris biasa antara angka dan satuan. Lebar sebenarnya tergantung pada font dan ukuran font; tiga spasi tidak memiliki lebar tetap dalam piksel.

Menghubungkan seluruh kalimat dengan banyak spasi tak terputus mengurangi peluang pemotongan baris dan dapat menyebabkan overflow pada layar sempit. Teks yang disalin juga mengandung karakter berbeda dari spasi biasa, U+0020, yang dapat memengaruhi pencarian dan perbandingan string. Hindari mengulang karakter ini untuk menyelaraskan konten atau membuat indentasi.

Mempertahankan spasi dan baris baru dengan white-space

Saat spasi berulang dan pemisah baris eksplisit merupakan bagian penting dari teks, terapkan white-space: pre-wrap pada elemen itu. Ini mempertahankan keduanya sambil memungkinkan pergantian baris tambahan untuk menyesuaikan lebar yang tersedia. Ini tidak menjamin bahwa URL atau kata panjang yang tidak terputus akan muat di dalam kotak.

Dalam contoh lengkap, baik pre-wrap maupun pre mempertahankan tiga spasi antara Alpha dan Beta serta baris baru sebelum Gamma. Persempit jendela: pre-wrap memungkinkan pergantian baris tambahan, sedangkan pre tidak. Contoh ini menggunakan overflow-x: auto untuk membuat yang terakhir bisa digulir secara horizontal. Dengan pre-line, pemisah baris eksplisit tetap ada tetapi spasi berturut-turut di antara kata-kata menjadi satu.

Tabel ini merangkum perbedaan pemrosesan teks yang umum. Ini tidak berarti bahwa detail seperti lebar tab atau spasi di akhir baris berperilaku identik. Periksa juga nilai yang diwarisi dan aturan CSS lainnya. Definisi white-space oleh W3C

Mengatur jarak antar elemen dengan CSS

Untuk memisahkan dua tombol, buat induknya menjadi kontainer Flexbox dan atur gap alih-alih menambahkan spasi teks. Gunakan margin untuk memberikan jarak di luar elemen dan padding di antara batas dan kontennya. Karakter spasi termasuk dalam konten; jarak CSS mengontrol tata letak.

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

Dalam contoh lengkap, tombol A dan B dipisahkan oleh gap: 1rem. Unit rem didasarkan pada ukuran font elemen root, sehingga tidak selalu 16 piksel. Jika lebar tidak cukup, flex-wrap: wrap memungkinkan tombol berpindah ke baris berikutnya. Dengan tetap menjaga semuanya tidak berubah, atur hanya gap ke 0, bandingkan hasilnya, dan kembalikan 1rem.

Hal yang diperiksa jika hasilnya berbeda

1. Jika teks literal   muncul, periksa bahwa Anda sedang mengedit HTML. Menempelkannya sebagai teks ke dalam editor visual, atau melakukan escape dua kali menjadi  , mencegahnya menjadi spasi.
2. Jika spasi atau pemisah baris hilang, periksa nilai white-space yang dihitung pada paragraf dan pastikan selektor CSS cocok. Indentasi sumber di dalam elemen pre-wrap juga dapat menjadi terlihat, jadi hapus spasi yang tidak diinginkan.
3. Jika konten meluap di perangkat mobile, persempit jendela dan periksa adanya spasi tak terputus yang berulang atau pengaturan pre. Tergantung pada tujuannya, ganti dengan spasi biasa atau gunakan pre-wrap. Periksa lagi pada lebar yang lebih besar setelah melakukan perubahan.

Untuk menampilkan ejaan   dalam suatu penjelasan daripada memasukkan spasi, tulis   di sumber HTML. Standar mencantumkan referensi karakter dan karakter yang sesuai. Daftar referensi karakter HTML WHATWG