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

Tạo khoảng cách là một việc làm khó hiểu và có rất nhiều cách để làm Việc này trong HTML, nếu như bạn làm không đúng cách có khả năng sẽ làm hỏng bố cục và giao diện so với thiết kế ban đầu. Mời bạn cùng nhâm nhi tách trà và đọc bài viết của ATP Web để thấu hiểu Hướng dẫn cách tạo khoảng cách trong HTML đơn giản 2022

&nbsp là gì?

&nbsp là viết tắt của từ non-breaking space hay còn được nhắc đên là không gian cố định (không gian cứng) được sử dụng trong lập trình hoặc giải quyết văn bản để làm 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 cách tạo khoảng cách trong HTML đơn giản 2022

Tác dụng của &nbsp trong HTML

&nbsp là một trong những HTML Entities được vận dụng thường xuyên nhất, để hiểu hơn về cách tạo khoảng trắng trong html bằng mời bạn cùng với gbaydev học hỏi ví dụ

Bạn cho tôi mượn 500.000 VNĐ

Ở một vài màn hình nhỏ hơn câu trên có khả năng bị chia nhỏ thành như thế này:

Bạn cho tôi mượn

500.000 VNĐ

Thậm chí tồi tệ hơn câu trên cũng có thể sẽ hiển thị như thế này:

Bạn cho tôi mượn 500.000 VNĐ

Để tránh việc ngắt dòng không nhất quán giữa 500.000 với VNĐ, mình sử dụng vào giữa 500.000 với VNĐ (tức là: 500.000 VNĐ). Khi làm như vậy, cùng lắm câu trên sẽ xuất hiện như sau:

Bạn cho tôi mượn

500.000 VNĐ

Một ví dụ khác cho tác dụng của là trong HTML bạn gõ bao nhiêu lần dấu cách thì trình duyệt web cũng quy về đặc trưng một khoảng trắng, ví dụ bạn gõ dòng code sau:

Bạn cho tôi mượn 500.000 VNĐ

Lưu ý: Bạn không nên quá lạm dụng để tạo khoảng cách, nếu không tài liệu HTML cũng có thể bị vỡ, khiến kết quả hiển thị không được như ý.

Hướng dẫn cách tạo khoảng cách HTML đơn giản 2022

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.

Sử dụng nội dung được định dạng sẵn

Bước 1 Mở văn bản HTML. Bạn có thể chỉnh sửa văn bản HTML bằ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.

Bước 2 Nhập <pre> trước nội dung mà bạn muốn định dạng trước. Đây là thẻ mở dành cho nội dung được định dạng sẵn.

Bước 3 Nhập nội dung mà bạn muốn ngay sau thẻ “<pre>”. Bằng việc định dạng sẵn nội dung, mọi khoảng trống và ngắt dòng được tạo bằng cách ấn “Enter” sẽ hiển thị trên trang HTML.

Bước 4 Nhập </pre> sau nội dung. Đây là thao tác đóng phần nội dung được định dạng sẵn.

(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