Hướng dẫn tạo khoảng cách dòng trong HTML mới nhất 2022

Tạo khoảng cách dòng trong HTML là một trong những từ khóa được search nhiều nhất trên google về chủ đề tạo khoảng cách trong html. Trong bài content này, ATP Web sẽ viết bài Hướng dẫn tạo khoảng cách dòng trong HTML mới nhất 2022.

&nbsp là gì?

Là viết tắt của từ non-breaking space hay còn được gọi là không gian cố định (không gian cứng) được sử dụng trong lập trình hoặc xử lý văn bản để tạo ra khoảng trắng trên một dòng và không thể bị ngắt bởi vùng chứa văn bản (word wrap). Trong HTML cho phép bạn tạo nhiều khoảng cách cho một đoạn tài liệu.

Hướng dẫn tạo khoảng cách dòng trong HTML mới nhất 2022.

Tác dụng của tạo khoảng cách dòng trong HTML

Là một trong những HTML Entities được sử dụng thường xuyên nhất, để hiểu hơn về cách tạo khoảng trắng trong html

Bình thường HTML chỉ hiển thị một khoảng trắng giữa các từ, không cần biết bạn đã gõ dấu cách bao nhiêu lần.

Để buộc các dấu cách đã bị bỏ kia phải hiển thị, hãy gõ vào nơi bạn muốn chèn.

Ví dụ gõ Xin chào. Sẽ làm ra một khoảng trắng thừa giữa Xin và chào.

Hướng dẫn tạo khoảng cách dòng trong HTML mới nhất 2022

Sử dụng HTML

Bước 1: Mở văn bản HTML. Bạn có thể chỉnh sửa văn bản HTML bằng cách sử dụng chương trình soạn thảo văn bản như NotePad hoặc TextEdit trên Windows. Bạn cũng có thể dùng chương trình soạn thảo HTML như Adobe Dreamweaver. Hãy thực hiện các bước sau để mở văn bản HTML:

Truy cập văn bản HTML trong File Explorer trên Windows hoặc Finder trên Mac.

Nhấp phải vào văn bản HTML mà bạn muốn chỉnh sửa.

Đặt con trỏ tại Open with (Mở bằng).

Nhấp vào chương trình mà bạn muốn dùng để chỉnh sửa văn bản.

Tiêu đề ảnh Insert Spaces in HTML Step 2

Bước 2 Ấn phím cách để thêm một khoảng trống thông thường. Để thêm khoảng trống thông thường, bạn sẽ nhấp vào nơi muốn thêm khoảng trống và ấn phím cách. Thường thì HTML chỉ hiển thị một khoảng trống giữa các từ dù bạn có ấn phím cách nhiều lần.

Bước 3 Nhập   để tăng khoảng trống. Đây là khoảng trống không bị ngắt dòng vì bạn không thể ngắt dòng tại vị trí đặt khoảng trống.[1]

Ví dụ, nếu bạn nhập Chào   bạn! thì một khoảng trống sẽ được chèn giữa “Chào” và “bạn!”

Nếu bạn lạm dụng tính năng này, trình duyệt sẽ khó mà chèn ngắt dòng một cách có trật tự và dễ đọc.

Bạn cũng có thể nhập   để tăng khoảng trống.

Bước 4 Chèn nhiều khoảng trống với độ rộng khác nhau. Bạn có thể chèn khoảng trống dài hơn bằng cách sử dụng một trong các lựa chọn sau:

Hai khoảng trống – Nhập &ensp;
Bốn khoảng trống – Nhập &emsp;
Thụt đầu dòng – Nhập

Sử dụng CSS

Bước 1 Mở văn bản HTML hoặc CSS. Bạn có thể sử dụng CSS trong phần mở đầu của văn bản HTML hoặc soạn thảo văn bản CSS riêng biệt.
Phần mở đầu của văn bản HTML là phần trên cùng của tập tin, được đặt giữa các thẻ “<head>” và “</head>”.

Bước 2 Tạo phần kiểu cho CSS. Phần kiểu được đặt trong phần mở đầu của mã HTML, hoặc trong trang kiểu riêng biệt. Hãy sử dụng các thẻ sau để tạo phần kiểu trong văn bản HTML hoặc trang kiểu khác.

Nhập <style> để mở phần kiểu. Tất cả mã CSS sẽ được nhập sau thẻ này.
Nhập </style> để đóng phần kiểu. Tất cả mã CSS phải được nhập trước thẻ đóng này.

Bước 3 Nhập thẻ sau vào vùng kiểu: p {text-indent: 5em;}. Thao tác này yêu cầu trình duyệt tạo thụt đầu dòng với 5 khoảng trống tại phần mã HTML phù hợp.

Bạn có thể điều chỉnh số khoảng trống bằng cách nhập một số khác sau “text-indent:”.

Đơn vị “em” tương đương với một khoảng trống theo kích thước chữ đã chọn. Bạn có thể dùng đơn vị khác, chẳng hạn như phần trăm (ví dụ: “text-indent: 15%;”) hoặc đơn vị đo lường (ví dụ: “text-indent: 3mm;”).

Bước 4 Nhập <p> tại nơi mà bạn muốn thêm thụt đầu dòng. Bạn có thể nhập thẻ này vào bất kỳ vị trí nào cần thêm thụt đầu dòng cho văn bản. Đây là thao tác thêm thụt đầu dòng phù hợp với các chỉ định trong CSS.

(Nguồn: Tổng hợp)

Lời tổng kết

Qua bài viết trên của ATP Web đã cung cấp đến các bạn đọc một số thông tin về hữu ích. Hy vọng những thông tin trên của bài viết sẽ hữu ích với các bạn đọc. Cảm ơn các bạn đã dành nhiều thời gian để xem qua bài viết này nhé.

ATPWEB – XÂY DỰNG NGÔI NHÀ ONLINE