Dokumentasi HTML interaktif: Spasi

Q: Apa perbedaan dan &emsp;?

selebar spasi biasa. &ensp; selebar setengah em dan &emsp; selebar satu em (lebar ukuran font). &ensp; dan &emsp; tidak digabung, tapi berbeda dengan , baris masih bisa terputus di situ.

Spasi di HTML:  , Banyak Spasi dan white-space

Browser menggabungkan deretan spasi apa pun di HTML menjadi satu. Pelajari cara menambahkan spasi ekstra dengan  , fungsi non-breaking space, cara mempertahankan spasi dan tab dengan <pre> dan white-space, dan kapan jarak dengan CSS lebih tepat.

Halaman ini dilengkapi editor yang bisa dijalankan. Edit, jalankan, dan lihat output-nya seketika.

Oleh Kevin Spektor, Co-founder & CTO

Diterbitkan Sep 24, 2026

Menambahkan spasi di HTML

Ketik lima spasi di antara dua kata di HTML dan browser hanya menampilkan satu. Deretan spasi, tab dan baris baru apa pun digabung menjadi satu spasi. Untuk menambahkan spasi ekstra, pakai entity non-breaking space  , satu untuk setiap spasi:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Spaces</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 18px; }
  </style>
</head>
<body>
  <p>Five typed spaces:     one shows.</p>
  <p>Five nbsp entities:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;five show.</p>
</body>
</html>

  cocok untuk beberapa spasi dalam satu baris teks. Untuk jarak yang lebih besar, atau jarak antar elemen, pakai CSS, yang dibahas di bawah.

Fungsi

  adalah non-breaking space (karakter U+00A0). Efeknya ada dua:

Tidak pernah digabung, jadi tiga entity ini menghasilkan tiga spasi.
Baris tidak pernah terputus di situ, jadi kata di kedua sisinya tetap bersama.

Efek kedua adalah tugas sebenarnya. Angka dan satuannya, inisial, dan frasa pendek yang terlihat aneh kalau terbelah ke dua baris digabungkan dengan  :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Non-breaking space</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    p { width: 170px; border: 2px solid #e5e7eb; padding: 4px; }
    .nb { border-color: #16a34a; }
  </style>
</head>
<body>
  <p>The race is exactly 10 km long and starts at 9 am.</p>
  <p class="nb">The race is exactly 10&nbsp;km long and starts at 9&nbsp;am.</p>
</body>
</html>

Di kotak abu-abu, "10" dan "km" jatuh di baris yang berbeda. Di kotak hijau keduanya tidak bisa dipisahkan. Untuk menjaga bagian yang lebih panjang tetap bersama, white-space: nowrap pada sebuah span lebih mudah daripada merangkai entity; lihat halaman line break.

Entity spasi dengan lebar berbeda

HTML punya karakter bernama untuk spasi yang lebih lebar dan lebih sempit. Karakter ini juga tidak digabung, jadi berguna untuk mengatur jarak halus di teks:

Entity	Nama	Lebar
` `	Non-breaking space	Sama dengan spasi biasa
`&ensp;`	En space	Setengah em
`&emsp;`	Em space	Satu em (ukuran font)
` `	Thin space	Sebagian kecil em, tergantung font-nya
` `	Narrow no-break space	Tipis, dan tanpa pemutusan baris

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Space widths</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 24px; }
    mark { background: #bfdbfe; }
  </style>
</head>
<body>
  <p>A<mark>&nbsp;</mark>B nbsp</p>
  <p>A<mark>&ensp;</mark>B ensp</p>
  <p>A<mark>&emsp;</mark>B emsp</p>
  <p>A<mark>&thinsp;</mark>B thinsp</p>
</body>
</html>

Sorotan biru menunjukkan lebar setiap spasi. Hanya   dan   yang juga mencegah pemutusan baris.

Mempertahankan setiap spasi: pre dan white-space

Kalau jarak adalah bagian dari konten (kode, ASCII art, kolom yang disejajarkan, puisi), pertahankan semua whitespace daripada menambahkan entity. Elemen <pre> melakukannya secara default, dan property CSS white-space melakukannya untuk elemen apa pun:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>white-space</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    div { border: 2px solid #e5e7eb; padding: 6px; margin-bottom: 8px; font-family: monospace; }
    .pre { white-space: pre; border-color: #2563eb; }
    .prewrap { white-space: pre-wrap; border-color: #f59e0b; }
  </style>
</head>
<body>
  <div>Name    Score
Ana     12</div>
  <div class="pre">Name    Score
Ana     12</div>
  <div class="prewrap">Name    Score
Ana     12</div>
  <pre>pre   keeps   spaces   too</pre>
</body>
</html>

Nilai `white-space`	Spasi	Baris baru	Membungkus baris panjang
`normal` (default)	Digabung	Menjadi spasi	Ya
`nowrap`	Digabung	Menjadi spasi	Tidak
`pre`	Dipertahankan	Dipertahankan	Tidak
`pre-wrap`	Dipertahankan	Dipertahankan	Ya
`pre-line`	Digabung	Dipertahankan	Ya

pre-wrap biasanya yang kamu butuhkan untuk teks dari pengguna: jaraknya dipertahankan dan tetap membungkus di layar yang sempit. pre mempertahankan baris apa adanya dan akan bergulir atau meluber.

Tab juga dipertahankan di dalam pre. Lebarnya 8 spasi secara default, dan property tab-size mengubahnya (tab-size: 4).

Jarak dengan CSS

Kebanyakan momen "aku butuh spasi di sini" sebenarnya urusan layout, dan CSS mengerjakannya lebih baik daripada entity, karena jaraknya tetap konsisten dan cukup diubah di satu tempat:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>CSS spacing</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .icon { margin-inline-end: 12px; color: #2563eb; }
    .wide { letter-spacing: 0.3em; }
    .words { word-spacing: 1em; }
    .buttons { display: flex; gap: 16px; }
  </style>
</head>
<body>
  <p><span class="icon">&#9733;</span>margin after an icon</p>
  <p class="wide">letter-spacing</p>
  <p class="words">word spacing between words</p>
  <div class="buttons"><button>One</button><button>Two</button><button>Three</button></div>
</body>
</html>

margin dan padding memberi jarak antar elemen, gap memberi jarak antar item di container flex atau grid, letter-spacing dan word-spacing memberi jarak pada teks itu sendiri. Untuk membuat indentasi baris pertama paragraf, pakai text-indent, yang dibahas di halaman center text.

Jarak di antara elemen inline

Sisi lain dari penggabungan: whitespace di antara dua elemen inline atau inline-block tetap dihitung sebagai satu spasi. Baris baru di antara dua tombol di kode sumbermu menghasilkan celah kecil di antara keduanya:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Inline gap</title>
  <style>
    span { display: inline-block; width: 60px; height: 30px; background: #2563eb; }
    .flex { display: flex; margin-top: 8px; }
  </style>
</head>
<body>
  <div>
    <span></span>
    <span></span>
  </div>
  <div class="flex">
    <span></span>
    <span></span>
  </div>
</body>
</html>

Pasangan pertama punya celah dari baris baru di kode sumber. Di container flex, whitespace di antara item diabaikan, jadi pasangan kedua saling menempel. Pakai flex dan gap kalau kamu ingin mengatur jaraknya dengan tepat.

Kesalahan umum

Rangkaian   untuk layout. Hasilnya rusak begitu font atau ukuran layar berubah. Pakai margin, padding atau gap.
Mengetik spasi ekstra dan berharap spasinya muncul. Spasinya digabung. Pakai   atau white-space: pre-wrap.
Menulis &nbsp tanpa titik koma. Browser biasanya menerimanya, tapi itu tidak valid dan gagal di beberapa posisi. Selalu akhiri dengan ;.
Memakai   di mana-mana untuk mencegah pembungkusan. Teks panjang tanpa pemutusan baris akan meluber di ponsel. Gabungkan hanya yang memang harus tetap bersama.
Membuat indentasi paragraf dengan spasi. Pakai text-indent di CSS.

Pertanyaan yang sering diajukan

Bagaimana cara menambahkan spasi di HTML?

Satu spasi berfungsi seperti yang diketik, tapi spasi tambahan digabung menjadi satu. Untuk lebih banyak spasi, pakai entity non-breaking space  , satu untuk setiap spasi: a   b. Untuk jarak layout, pakai margin, padding atau gap di CSS.

Apa arti   di HTML?

  adalah non-breaking space. Tampilannya seperti spasi biasa, tapi browser tidak pernah memutus baris di situ dan tidak pernah menggabungkannya, jadi kata seperti 10 km tetap menyatu dan kamu bisa menambahkan spasi ekstra.

Kenapa HTML mengabaikan spasi yang kuketik?

HTML menggabungkan whitespace: deretan spasi, tab dan baris baru apa pun ditampilkan sebagai satu spasi, dan whitespace di awal dan akhir baris dihapus. Pakai  , <pre> atau property CSS white-space untuk mempertahankannya.

Bagaimana cara menambahkan tab di HTML?

HTML tidak punya tab yang terlihat di luar teks preformatted. Di dalam <pre> atau elemen dengan white-space: pre, karakter tab dipertahankan, dan property CSS tab-size mengatur lebarnya. Untuk membuat indentasi paragraf, pakai text-indent atau padding-inline-start di CSS.

Apa perbedaan   dan &emsp;?

  selebar spasi biasa. &ensp; selebar setengah em dan &emsp; selebar satu em (lebar ukuran font). &ensp; dan &emsp; tidak digabung, tapi berbeda dengan  , baris masih bisa terputus di situ.

Konsep terkait