HTML khoảng trắng

Việc thêm một khoảng trắng vào HTML của bạn có thể khó khăn. Và có ít nhất 5 cách để thực hiện việc này

Hướng dẫn này sẽ cho bạn thấy một số ví dụ. Nó cũng sẽ chỉ cho bạn cách sử dụng các phiên bản không gian lạ mắt

Bạn có thể làm tất cả điều này trong HTML thô mà không cần CSS. Nhưng xin lưu ý rằng CSS là cách ưa thích để thêm không gian vào HTML của bạn. Và freeCodeCamp có rất nhiều hướng dẫn về cách thực hiện điều này bằng mô hình hộp CSS

Ký tự ASCII cho một khoảng trắng là gì?

Mã ký tự ASCII cho một khoảng trắng là 20. Nhưng đây chỉ là cách tiêu chuẩn. có một số

Có 5 loại khoảng trắng trong HTML mà bạn có thể sử dụng. Bằng mắt thường, chúng trông giống nhau nhưng chúng phục vụ các mục đích hơi khác nhau

Và còn có Ký tự tab, biểu thị việc nhấn phím tab trên bàn phím của bạn. Và Ký tự trả về vận chuyển, đại diện cho việc nhấn phím enter trên bàn phím của bạn

+---------------------+-----------+
|      Character      | HTML Code |
+---------------------+-----------+
| Non-breaking space  |      |
| En space            |      |
| Em space            |      |
| Thin space          |    |
| Standard space      |      |
| New Line (Return)   | 
     |
| Tab Character       | 	     |
+---------------------+-----------+

Ký tự khoảng trắng rộng bao nhiêu?

Có bốn độ rộng phổ biến cho các ký tự khoảng trắng

1. Không gian có chiều rộng tiêu chuẩn. Điều này còn được gọi là "không gian ngắt dòng" vì nó sẽ không gây ra ngắt dòng (trả về xuống dòng AKA)
2. Em không gian. Cái này được gọi là "Em" vì nó rộng bằng chữ M trong bất kỳ kiểu chữ nào bạn đang sử dụng. (Nếu bạn đã nghe thuật ngữ em-dash, đây là một dấu gạch ngang rộng bằng chữ M. )
3. không gian. Cái này được gọi là "En" vì nó rộng bằng chữ n trong kiểu chữ của bạn
4. Và cuối cùng là "Không gian mỏng", là không gian mỏng nhất trong tất cả các không gian

Biểu tượng cho không gian trong HTML là gì?

Thực thể HTML được sử dụng phổ biến nhất là 

Bạn có thể thử ném văn bản này để buộc nó hiển thị khoảng trắng

Ví dụ: giả sử bạn muốn đặt hai khoảng trắng sau một câu, nhưng một thứ khác trong công cụ hiển thị trang web đang tự động xóa một trong các khoảng trắng. Bạn có thể gõ  để thêm hai dấu cách

Không gian có phải là ký tự không phải ASCII không?

Không. Không gian là một ký tự ASCII. Giá trị ASCII của nó là 20 và bạn có thể nhập nó như thế này. 

Làm cách nào để tạo khoảng trắng trong HTML?

Bạn có thể muốn sử dụng CSS để căn giữa các thành phần HTML của mình thay vì không gian mã hóa cứng

Nhưng nếu bạn chỉ muốn một cách nhanh chóng và bẩn thỉu để tạo khoảng trắng và đẩy văn bản xung quanh, bạn có thể sử dụng lặp đi lặp lại cùng một ký tự khoảng trắng như thế này

[The text you want to add trailing whitespace to]      [the text you want to add trailing whitespace to]

Nhân vật nào trông giống như một khoảng trắng nhưng không phải vậy?

Có hai ký tự trông giống như dấu cách nhưng không phải

1. Ký tự Dòng mới – còn được gọi là "sự trở lại vận chuyển". Mã HTML cho ký tự xuống dòng là.

   [The text you want to add trailing whitespace to]      [the text you want to add trailing whitespace to]

   0
2. Ký tự tab, là thứ bạn nhận được khi nhấn nút tab trong trường văn bản. Mã HTML cho Ký tự tab là.

   [The text you want to add trailing whitespace to]      [the text you want to add trailing whitespace to]

   1

Tôi hy vọng hướng dẫn này đã được hữu ích. Tiến lên và tạo khoảng trống. 🚀

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

Quincy Larson

Người thầy sáng lập freeCodeCamp. tổ chức

Nếu bạn đọc đến đây, hãy tweet cho tác giả để cho họ thấy bạn quan tâm. Tweet một lời cảm ơn

Học cách viết mã miễn phí. Chương trình giảng dạy mã nguồn mở của freeCodeCamp đã giúp hơn 40.000 người có được việc làm với tư cách là nhà phát triển. Bắt đầu

Tạo khoảng trắng và phân tách vật lý các phần tử trong HTML có thể khó hiểu đối với người mới bắt đầu thiết kế web. Điều này là do HTML có một thuộc tính được gọi là "thu gọn khoảng trắng. " cho dù bạn nhập 1 khoảng trắng hay 100 trong mã HTML của mình, trình duyệt web sẽ tự động thu gọn các khoảng trắng đó thành một khoảng trắng duy nhất. Điều này khác với một chương trình như Microsoft Word, cho phép người tạo tài liệu thêm nhiều khoảng trắng để phân tách các từ và các thành phần khác của tài liệu đó. Đây không phải là cách hoạt động của khoảng cách thiết kế trang web

Vậy, làm cách nào để bạn thêm khoảng trắng trong HTML hiển thị trên trang web mà bạn đã tạo?

Không gian trong HTML Với CSS

Cách ưa thích để thêm khoảng trắng trong HTML của bạn là sử dụng Cascading Style Sheets (CSS). CSS nên được sử dụng để thêm bất kỳ khía cạnh trực quan nào của trang web và vì khoảng cách là một phần của đặc điểm thiết kế trực quan của trang nên CSS là nơi bạn muốn thực hiện điều này

Trong CSS, bạn có thể sử dụng thuộc tính lề hoặc thuộc tính đệm để thêm khoảng trống xung quanh các phần tử. Ngoài ra, thuộc tính thụt lề văn bản thêm khoảng trống vào phía trước văn bản, chẳng hạn như để thụt lề đoạn văn

Dưới đây là một ví dụ về cách sử dụng CSS để thêm khoảng trống ở phía trước tất cả các đoạn văn của bạn. Thêm CSS sau vào biểu định kiểu bên ngoài hoặc bên trong của bạn

p {
text-indent: 3em;
} 

Khoảng trắng trong HTML bên trong văn bản của bạn

Nếu bạn chỉ muốn thêm một hoặc hai dấu cách vào văn bản của mình, bạn có thể sử dụng dấu cách không ngắt. Ký tự này hoạt động giống như một ký tự khoảng trắng tiêu chuẩn, chỉ khác là nó không thu gọn bên trong trình duyệt.  

Dưới đây là một ví dụ về cách thêm năm dấu cách bên trong một dòng văn bản

This text has     five extra spaces inside it

Sử dụng HTML

This text has     five extra spaces inside it

You can also use the
 tag to add extra line breaks.

This sentence has five line breaks at the end of it 

Tại sao khoảng cách trong HTML là một ý tưởng tồi

Mặc dù cả hai tùy chọn này đều hoạt động – phần tử dấu cách không ngắt thực sự sẽ thêm khoảng cách vào văn bản của bạn và dấu ngắt dòng sẽ thêm khoảng cách bên dưới đoạn được hiển thị ở trên – đây không phải là cách tốt nhất để tạo khoảng cách trong trang web của bạn. Việc thêm các thành phần này vào HTML của bạn sẽ thêm thông tin trực quan vào mã thay vì tách cấu trúc của trang (HTML) khỏi kiểu trực quan (CSS). Các phương pháp hay nhất chỉ ra rằng những thứ này phải tách biệt vì một số lý do, bao gồm cả việc dễ dàng cập nhật trong tương lai cũng như kích thước tệp tổng thể và hiệu suất trang.  

Nếu bạn sử dụng biểu định kiểu bên ngoài để chỉ định tất cả các kiểu và khoảng cách của mình, thì việc thay đổi các kiểu đó cho toàn bộ trang web rất dễ thực hiện vì bạn chỉ cần cập nhật một biểu định kiểu đó

Consider the example above of the sentence with five
tags at the end of it. If you wanted that amount of spacing at the bottom of every paragraph, you would need to add that HTML code to every paragraph in your entire site. That is a fair amount of extra markup which will bloat your pages. Additionally, if you decide down the road that this spacing is too much or too little, and you wish to change it a bit, you would need to edit every single paragraph in your entire website. No thank you!

Thay vì thêm các phần tử giãn cách này vào mã của bạn, hãy sử dụng CSS.  

p {
padding-bottom: 20px;
}

Một dòng CSS đó sẽ thêm khoảng cách dưới các đoạn trên trang của bạn. Nếu bạn muốn thay đổi khoảng cách đó trong tương lai, hãy chỉnh sửa một dòng này (thay vì toàn bộ mã trang web của bạn) và bạn đã sẵn sàng

Now, if you need to add a single space in one part of your website, using a
tag or a single non-breaking space is not the end of the world, but you need to be careful. Using these inline HTML spacing options can be a slippery slope. While one or two may not hurt your site, if you continue down that path, you will introduce problems into your pages. In the end, you are better off turning to CSS for HTML spacing, and all other webpage visual needs.​

Trích dẫn bài viết này

Định dạng

trích dẫn của bạn

Kyrnin, Jennifer. "Tạo khoảng trắng HTML. "ThinkCo. https. //www. suy nghĩ. com/spaces-in-html-3466574 (truy cập ngày 25 tháng 12 năm 2022)

HTML hiển thị khoảng trắng như thế nào?

Khoảng trắng trong CSS là gì?

Làm cách nào để thêm khoảng trắng trong CSS?