LINE SPACE TRONG HTML

Khoảng cách là một việc phức tạp và có rất nhiều cách để thực hiện trong HTML, nếu bạn không làm đúng nó có thể làm hỏng giao diện của thiết kế ban đầu. Mời các bạn cùng nhâm nhi tách trà và đọc bài viết của tôi để hiểu nhé Là gì ? và cách tạo khoảng trắng (space) trong html.

Bạn đang xem: Giãn cách dòng trong html

Là gì ?

&nbsp đại diện cho từ Không gian không phá vỡ Còn được gọi là không gian cố định (không gian cứng), nó được sử dụng trong lập trình hoặc xử lý văn bản để tạo 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 (dòng mới). Trong HTML, cho phép bạn tạo nhiều khoảng trắng cho một đoạn tài liệu.

Tác dụng của trong HTML

&nbsp là một trong những thực thể HTML được sử dụng nhiều nhất, để hiểu rõ hơn về cách tạo khoảng trắng trong html với &nbsp mời bạn với xechaydiendkbike.vn Tìm hiểu các ví dụ sau:

Bạn cho tôi mượn 500.000 đồng Trên một số màn hình nhỏ hơn câu trên có thể chia nhỏ như thế này:

Bạn cho tôi mượn 500.000 đồng Thậm chí tệ hơn câu trên cũng có thể được hiển thị là:

Bạn cho tôi mượn 500.000 đồng để tránh tình trạng đứt gánh giữa chừng 500.000 won với VNDtôi sử dụng &nbsp từ 500.000 đến VND (tức là 500.000 VND). Làm như vậy, tối đa câu trên sẽ hiển thị như thế này:

Bạn cho tôi mượn 500.000 đồng Một ví dụ khác về tác dụng của &nbsp trong HTML Bao nhiêu lần bạn nhập một khoảng trắng, trình duyệt cũng sẽ tham chiếu đến một khoảng trắng, ví dụ: bạn nhập dòng mã sau:

Bạn cho tôi vay 500.000 đồng

Nhưng khi xem bằng trình duyệt Chrome thì hiện ra câu trên như sau:

*

Hình ảnh: Ví dụ 1 về tác dụng của trong HTML

Thật là nhàm chán phải không các bạn, các bạn có thể sử dụng nhiều lần để tạo khoảng cách mong muốn, ví dụ:

Bạn cho tôi vay 500.000 đồng

Kết quả sẽ là những gì bạn muốn.

*

Hình ảnh: ví dụ về việc sử dụng một lô để tạo ra nhiều khoảng trắng

Cần lưu ý: Bạn không nên quá lạm dụng để tạo đệm, nếu không tài liệu HTML cũng có thể bị vỡ gây ra kết quả hiển thị không như ý.

Khi nào bạn không nên sử dụng

Bạn đã thấy mã chưa?

Bạn cho tôi vay 500.000 đồng

có vẻ khá khó đọc và việc sử dụng tạo ra nhiều khoảng trắng không phải là một phương pháp tối ưu. Với đoạn mã trên, khi hiển thị trên màn hình của bạn có thể trông khá đẹp mắt, nhưng trên một số thiết bị khác thì có thể trông rất xấu.

Do đó, bạn cũng có thể sử dụng lề với đệm lót tạo khoảng cách trong HTML là một cách tốt hơn và dễ dàng hơn nhiều để thực hiện việc này (xem chi tiết bên dưới) và &nbsp chỉ nên sử dụng để tạo khoảng trống khi bạn muốn để mọi thứ gần nhau.

trong WordPress

Trình soạn thảo WordPress Gutenberg tạo Không gian không phá vỡ trong bài viết một cách dễ dàng, thay vì sử dụng dấu cách, hãy nhấn tổ hợp phím Sự lựa chọn + Không gian trên Mac hoặc ĐIỀU KHIỂN + Khoảng cách + Không gian trên Windows.

Trong trình chỉnh sửa HTML của các phiên bản cũ hơn, việc chèn khoảng trắng có thể phức tạp hơn nhiều, bạn có thể thử chèn trực tiếp trong trình chỉnh sửa. Tuy nhiên, nếu chủ đề của bạn không có CSS ​​chỉ định cách hiển thị, bạn có thể sẽ thấy mã hiển thị trên trang.

Một giải pháp khác mà tôi tìm thấy là tạo một mã nhỏ thao tác đơn giản trong tệp functions.php của chủ đề:

// shortcode Chức năng nbsp_shortcode ($ atts, $ content = null) {$ content = “”; return $ content;} add_shortcode (“nbsp”, “nbsp_shortcode”); sau đó bạn có thể gọi bất cứ khi nào bạn cần dấu cách với ‘‘.

Cần lưu ý: Bạn cũng có thể thay thế nó bằng

Các ký tự khoảng trắng khác trong HTML

Khi tạo khoảng trắng giữa các từ hoặc các phần tử khác, không chỉ &nbsp là tạo khoảng trắng, nhưng có nhiều thực thể HTML khác cũng làm điều tương tự. Dưới đây là phiên bản của các thực thể HTML cũng thường được sử dụng &nbsp:

Họ Thực thể HTML Số thực thể Hàm số
Tạo không gian
Trong không gian Tạo 2 không gian
Tôi không gian Tạo 3 không gian
Thu hẹp không gian không bị gián đoạn gậy
Không gian 3 người Tương tự với
không gian hình # Tạo 2 không gian
dấu chấm câu Tạo khoảng trắng
không gian mỏng Tạo khoảng trắng mỏng
không gian tóc Tạo không gian siêu mỏng

Bảng các ký tự tạo ra các khoảng trắng khác &nbsp trong HTML

Cần lưu ý: Tất cả các đoạn mã trên đều tạo ra khoảng trắng, chúng chỉ khác nhau về khoảng cách giữa các dấu chấm

Cách tạo khoảng cách trong HTML

Việc tạo khoảng cách trong HTML không hề đơn giản vì ngày nay có rất nhiều thiết bị với các kích thước màn hình khác nhau. Dưới đây là một số lựa chọn thay thế khác cho các thực thể HTML, cụ thể là tôi khuyên bạn nên:

Đệm di động

Đệm di động là một thuộc tính HTML được sử dụng để chỉ định khoảng cách (tính bằng pixel) giữa nội dung văn bản và cạnh. Đây là một giải pháp khá phổ biến vì các tài liệu HTML sử dụng rất nhiều bảng, ví dụ:

Hàng 1 cột 1 Hàng 1 cột 2 Hàng 1 cột 3
Hàng 2 cột 1 Hàng 2 Cột 2 Hàng 2 cột 3

Kết quả khi xem trong trình duyệt Chrome

*

Hình ảnh: Tạo padding trong HTML bằng cách sử dụng cellpadding

có nghĩa là khoảng cách giữa chữ và các bữa tiệc là 12px

Đệm di động có một hạn chế là không thể ghi đè khoảng cách của nó, vì vậy Đệm di động là một thuộc tính HTML. Bạn có phong cách CSS nào không quan trọng.

Đệm

Đệm là một thuộc tính CSS có thể ghi đè miễn phí, cực kỳ hữu ích khi tạo khoảng trắng HTML cho máy tính để bàn và thiết bị di động cũng như các bảng. Bạn có thể chỉ định từng khoảng cách khác nhau cho từng thiết bị một, để có giao diện web đẹp mắt cho từng thiết bị.

Xem thêm: Hướng dẫn cách đặt mật khẩu Messenger cho Iphone, Cách đặt mật khẩu Messenger cho Iphone

Cú pháp CSS đệm lót rất đơn giản như sau:

style = “padding: 15px;”

thẻ td.

Một phương pháp khác là với HTML, chúng tôi có. . Thường là bản đồ Xác định các ô dữ liệu điển hình. Khi để trống, chúng tạo ra các ô vô hình có thể được sử dụng để tạo khoảng cách.

Có một số lý do tại sao giải pháp này hiếm khi được sử dụng.

Trước hết, các ô được xác định theo cách này không phải lúc nào cũng giữ nguyên chiều cao của chúng, đôi khi chúng ta nhập dữ liệu vào thẻ sẽ không có khoảng trống nào được tạo ra, điều này sẽ cản trở việc thiết kế giao diện.

Thứ hai, việc sử dụng chúng yêu cầu tạo toàn bộ bảng mà bạn có thể sẽ không sử dụng và nếu bạn đang thiết kế giao diện đáp ứng cho nhiều thiết bị, bạn sẽ cần phải tích hợp nhiều lớp và CSS.

Lề

Margin là một thuộc tính CSS tương tự như Padding, sự khác biệt giữa margin và padding là padding tạo ra padding từ bên trong và margin tạo padding từ bên ngoài hộp.

Cú pháp cho lề CSS như sau:

style = “margin: 15px;”

Bản đồ (tạm dừng)

Bản đồ là một cách phổ biến để tạo khoảng trắng trong HTML, nó thường được sử dụng để tạo ngắt giữa các tài liệu.

Chỉ cần thêm thẻ trong văn bản bạn muốn ngắt.

Tại sao bạn thấy nhân vật trên một số trang web?

Nơi duy nhất bạn thường thấy và sử dụng &nbsp nằm trong vùng soạn thảo văn bản của trang web dưới dạng mã HTML, khi được thực hiện đúng &nbsp sẽ được hiển thị dưới dạng khoảng cách trên trình duyệt. Tuy nhiên, một số ứng dụng phân tích cú pháp HTML không chính xác, vì vậy tài liệu sẽ hiển thị thêm các bit mã HTML để bạn xem. &nbsp ở trên.

Sự kết luận

Trong bài này xechaydiendkbike.vn Giải thích rõ ràng khái niệm &nbsp gì? cũng như hiệu ứng và khi nào bạn không nên sử dụng mã trong HTML,…

Nếu bạn đang học lập trình web HTML, CSS, Javascript (JS), hãy theo dõi trang web xechaydiendkbike.vn để nhận các hướng dẫn mới nhất và nhiều năm kinh nghiệm lập trình.

xin hãy yêu trang người hâm mộBan nhạc sau đó xechaydiendkbike.vn Hãy nói chuyện nhiều hơn với các lập trình viên khác.