Trong HTML, đôi khi chúng ta cần tạo khoảng trắng và không dễ dàng như chỉ sử dụng phím cách để tạo. Điều này đặc biệt đúng nếu chúng ta cần nhiều khoảng trắng trong một hàng hoặc nhiều tab - HTML có xu hướng thu gọn nhiều khoảng trắng đó thành một khoảng trắng. Đây là nơi các thực thể HTML xuất hiện. Trong bài viết này, chúng ta sẽ xem xét các thực thể HTML khác nhau cho phép chúng ta tạo không gian ở tất cả các kích thước khác nhau.
Có bốn loại không gian chính mà chúng ta có thể làm việc với các phần tử HTML:không gian mỏng, không gian không ngắt, không gian vi và không gian em. Trình chỉnh sửa mã bên dưới phác thảo sự khác biệt về kích thước giữa bốn loại:
<!DOCTYPE html>
<!--
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title></title>
<style>
span {
background: pink;
}
<style>
body {
font-family: Arial
}
</style>
</head>
<body style="font-family:Arial;">
<h1>Differences in Sizes of Space Entities in HTML</h1>
<!-- At beginning of sentences -->
<p style="font-size:16px;text-decoration:underline;font-weight:bold;"> Beginning of Sentences</p>
<p><span> </span>I am a sentence.</p>
<p><span> </span>I am a sentence.</p>
<p><span> </span>I am a sentence.</p>
<p><span> </span>I am a sentence.</p>
<!-- in between words -->
<p style="font-size:16px;text-decoration:underline;font-weight:bold;"> In Between Words</p>
<p>I<span> </span>am<span> </span>a<span> </span>sentence.</p>
<p>I<span> </span>am<span> </span>a<span> </span>sentence.</p>
<p>I<span> </span>am<span> </span>a<span> </span>sentence.</p>
<p>I<span> </span>am<span> </span>a<span> </span>sentence.</p>
</body>
</html>
Các loại không gian khác nhau có thể phục vụ các mục đích khác nhau. Trong ví dụ mã này, chúng tôi xem xét sự khác biệt giữa không gian tiêu chuẩn sử dụng phím cách và sử dụng thực thể HTML.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
</head>
<body style="font-family:Arial;">
<div>
<strong>Using nbsp; example</strong>
<br/>
<br/>
<div style="width:50px;height: 50px;border:1px solid red;margin:10px;">Dr. John Doe</div>
<div style="width:50px;height: 50px; border: 1px solid red;margin:10px;">Dr. John Doe</div>
<div style="width:50px;height: 50px;border:1px solid red;margin:10px;">Reno, NV</div>
<div style="width:50px;height: 50px; border: 1px solid red;margin:10px;">Reno, NV</div>
</div>
<div>
<strong>Using emsp; example</strong>
<br/>
<br/>
<div style="border:1px solid red;margin:10px;">
<p>Here are some quotes.</p>
<p> <em> —To be or not to be, that is the question...</em></p>
<p> <em> —This above all: to thine own self be true...</em></p>
<p> <em> —What's in a name? That which we call a rose
By any other word would smell as sweet...</em></p>
</div>
<div style="border: 1px solid red;margin:10px;">
<p>Here are some quotes.</p>
<p> <em> —To be or not to be, that is the question...</em></p>
<p> <em> —This above all: to thine own self be true...</em></p>
<p> <em> —What's in a name? That which we call a rose
By any other word would smell as sweet...</em></p>
</div>
</div>
</body>
Khi bạn có một cụm từ, tên hoặc số không được đặt ở dòng tiếp theo, hãy sử dụng thực thể ký tự nbsp. Khi bạn có một khối văn bản cần được nhấn mạnh trong dòng hoặc đoạn văn của chính nó, hãy sử dụng một thực thể ký tự emsp.
Bảng này phác thảo các mã có thể được sử dụng với các không gian kích thước khác nhau:
Bất kỳ mã nào trong số này đều phù hợp với kích thước / loại không gian tương ứng của chúng. Hỗ trợ trình duyệt khá rộng rãi đối với Tên thực thể, nhưng nếu không đúng như vậy, mã Hex và Dec cũng hoạt động.