Tài liệu HTML chạy trực tiếp: Khoảng trắng

Q: và &emsp; khác nhau thế nào?

rộng bằng một dấu cách bình thường. &ensp; rộng nửa em và &emsp; rộng một em (bằng cỡ chữ). &ensp; và &emsp; không bị gộp, nhưng khác với , dòng vẫn có thể ngắt tại chúng.

Khoảng trắng trong HTML:  , dấu cách và white-space

Trình duyệt gộp mọi chuỗi dấu cách liên tiếp trong HTML thành một. Tìm hiểu cách thêm dấu cách bằng  , tác dụng của khoảng trắng không ngắt dòng, cách giữ nguyên dấu cách và tab bằng <pre> và white-space, và khi nào nên tạo khoảng cách bằng CSS.

Trang này có trình soạn thảo chạy trực tiếp. Sửa, chạy và xem đầu ra ngay lập tức.

Bởi Kevin Spektor, Đồng sáng lập và CTO

Đăng ngày Sep 24, 2026

Thêm dấu cách trong HTML

Gõ năm dấu cách giữa hai từ trong HTML và trình duyệt chỉ hiển thị một. Mọi chuỗi dấu cách, tab và xuống dòng liên tiếp đều bị gộp thành một dấu cách. Để thêm dấu cách, dùng entity khoảng trắng không ngắt dòng  , mỗi dấu cách một lần:

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

  hợp để thêm vài dấu cách trong một dòng chữ. Với khoảng cách lớn hơn, hoặc khoảng cách giữa các phần tử, hãy dùng CSS, như ở phần dưới.

làm gì

  là khoảng trắng không ngắt dòng (non-breaking space, ký tự U+00A0). Nó có hai tác dụng:

Nó không bao giờ bị gộp, nên ba entity tạo ra ba dấu cách.
Dòng không bao giờ ngắt tại đó, nên các từ ở hai bên luôn đi liền nhau.

Tác dụng thứ hai mới là công việc thật sự của nó. Con số và đơn vị đi kèm, chữ viết tắt tên, và những cụm từ ngắn trông kỳ cục khi bị tách ra hai dòng được nối bằng  :

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

Trong khung màu xám, "10" và "km" rơi xuống hai dòng khác nhau. Trong khung màu xanh lá, chúng không thể bị tách ra. Để giữ một đoạn dài hơn đi liền nhau, đặt white-space: nowrap trên một span dễ hơn là nối chuỗi các entity; xem trang xuống dòng.

Các entity khoảng trắng có độ rộng khác nhau

HTML có các ký tự được đặt tên cho khoảng trắng rộng hơn và hẹp hơn. Chúng cũng không bị gộp, nên rất tiện để căn chỉnh khoảng cách nhỏ trong văn bản:

Entity	Tên	Độ rộng
` `	Non-breaking space	Bằng một dấu cách bình thường
`&ensp;`	En space	Nửa em
`&emsp;`	Em space	Một em (bằng cỡ chữ)
` `	Thin space	Một phần nhỏ của em, tùy theo font
` `	Narrow no-break space	Hẹp, và không ngắt dòng

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

Phần tô xanh dương cho thấy độ rộng của từng khoảng trắng. Chỉ   và   còn ngăn được việc ngắt dòng.

Giữ mọi dấu cách: pre và white-space

Khi khoảng cách là một phần của nội dung (code, ASCII art, các cột thẳng hàng, thơ), hãy giữ toàn bộ khoảng trắng thay vì thêm entity. Phần tử <pre> làm điều này theo mặc định, và thuộc tính CSS white-space làm được cho mọi phần tử:

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

Giá trị `white-space`	Dấu cách	Xuống dòng	Tự xuống dòng khi dòng dài
`normal` (mặc định)	Bị gộp	Thành dấu cách	Có
`nowrap`	Bị gộp	Thành dấu cách	Không
`pre`	Giữ nguyên	Giữ nguyên	Không
`pre-wrap`	Giữ nguyên	Giữ nguyên	Có
`pre-line`	Bị gộp	Giữ nguyên	Có

pre-wrap thường là giá trị bạn cần cho chữ do người dùng nhập: nó giữ khoảng cách mà vẫn tự xuống dòng trên màn hình hẹp. pre giữ nguyên các dòng và cho cuộn hoặc tràn ra ngoài.

Tab cũng được giữ trong pre. Mặc định độ rộng của tab là 8 dấu cách, và thuộc tính tab-size thay đổi được độ rộng này (tab-size: 4).

Tạo khoảng cách bằng CSS

Phần lớn những lúc "cần một khoảng trắng ở đây" thật ra là chuyện bố cục, và CSS làm tốt hơn entity, vì khoảng cách luôn đồng nhất và chỉ cần sửa ở một chỗ:

<!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 và padding tạo khoảng cách cho phần tử, gap tạo khoảng cách giữa các mục trong flex hoặc grid container, letter-spacing và word-spacing giãn chính các chữ. Để thụt lề dòng đầu của đoạn văn, dùng text-indent, được giới thiệu ở trang căn giữa chữ.

Khoảng hở giữa các phần tử inline

Mặt trái của việc gộp khoảng trắng: khoảng trắng giữa hai phần tử inline hoặc inline-block vẫn được tính là một dấu cách. Một dấu xuống dòng giữa hai nút trong mã nguồn sẽ tạo ra một khoảng hở nhỏ giữa chúng:

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

Cặp đầu tiên có khoảng hở do dấu xuống dòng trong mã nguồn. Trong flex container, khoảng trắng giữa các mục bị bỏ qua, nên cặp thứ hai dính sát vào nhau. Dùng flex và gap khi bạn muốn kiểm soát chính xác khoảng cách.

Lỗi thường gặp

Chuỗi   để dàn bố cục. Chúng vỡ ngay khi font hoặc kích thước màn hình thay đổi. Hãy dùng margin, padding hoặc gap.
Gõ thêm dấu cách và mong chúng hiện ra. Chúng bị gộp. Dùng   hoặc white-space: pre-wrap.
Viết &nbsp thiếu dấu chấm phẩy. Trình duyệt thường vẫn chấp nhận, nhưng cách viết này không hợp lệ và hỏng ở một số vị trí. Luôn kết thúc bằng ;.
Dùng   khắp nơi để chặn xuống dòng. Một đoạn dài không ngắt dòng sẽ tràn ra ngoài trên điện thoại. Chỉ nối những gì bắt buộc phải đi liền nhau.
Thụt lề đoạn văn bằng dấu cách. Hãy dùng text-indent trong CSS.

Câu hỏi thường gặp

Làm sao thêm dấu cách trong HTML?

Một dấu cách hoạt động như khi gõ, nhưng các dấu cách thừa bị gộp thành một. Để có thêm, dùng entity khoảng trắng không ngắt dòng  , mỗi dấu cách một entity: a   b. Còn khoảng cách trong bố cục thì dùng CSS margin, padding hoặc gap.

  trong HTML nghĩa là gì?

  là khoảng trắng không ngắt dòng (non-breaking space). Nó trông như một dấu cách bình thường, nhưng trình duyệt không bao giờ ngắt dòng tại đó và không bao giờ gộp nó, nên nó giữ các cụm như 10 km đi liền nhau và cho phép bạn thêm dấu cách.

Vì sao HTML bỏ qua các dấu cách?

HTML gộp khoảng trắng: mọi chuỗi dấu cách, tab và xuống dòng liên tiếp được hiển thị thành một dấu cách, và khoảng trắng ở đầu và cuối dòng bị xóa. Dùng  , <pre> hoặc thuộc tính CSS white-space để giữ lại.

Làm sao thêm tab trong HTML?

HTML không hiển thị tab bên ngoài văn bản định dạng sẵn. Bên trong <pre> hoặc một phần tử có white-space: pre, ký tự tab được giữ lại và thuộc tính CSS tab-size đặt độ rộng của nó. Để thụt lề một đoạn văn, dùng text-indent hoặc padding-inline-start trong CSS.

  và &emsp; khác nhau thế nào?

  rộng bằng một dấu cách bình thường. &ensp; rộng nửa em và &emsp; rộng một em (bằng cỡ chữ). &ensp; và &emsp; không bị gộp, nhưng khác với  , dòng vẫn có thể ngắt tại chúng.

Khái niệm liên quan