Nội dung chính
Show
- là gì?
- Tác dụng của trong HTML
- Khi nào bạn không nên sử dụng
- trong WordPress
- Các ký tự tạo khoảng trắng khác trong HTML
- Cách tạo khoảng cách trong HTML
- Cellpadding
- Các thẻ td
- Thẻ (break)
- Tại sao bạn thấy ký tự ở một số website
- Kết luận
- Video liên quan
Tạo khoảng cách là một việc làm phức tạp và có rất nhiều cách để làm việc này trong HTML, nếu bạn làm không đúng cách có thể sẽ làm hỏng 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 mình để hiểu là gì? và cách tạo khoảng cách (khoảng trắng) trong html nhé.
Bạn đang xem: Khoảng cách dòng trong html
Tóm Tắt
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.
Tác dụng của 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ằng mời bạn cùng với hostingvietnam.vn tìm hiểu ví dụ sau:
Bạn cho tôi mượn 500.000 VNĐỞ một số màn hình nhỏ hơn câu trên có thể bị chia nhỏ thành như thế này:
Bạn cho tôi mượn500.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.000VNĐĐể 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ẽ hiển thị như sau:
Bạn cho tôi mượn500.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 cũng quy về duy nhất 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Đ
Nhưng khi bạn xem bằng trình duyệt chrome thì câu trên lại hiển thị như sau:
Thật khó chịu phải không, không sao bạn có thể dùng nhiều lần để tạo ra khoảng cách mong muốn, ví dụ:
Bạn cho tôi mượn500.000VNĐ
kết quả sẽ được như ý bạn.
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ư ý.
Khi nào bạn không nên sử dụng
Bạn có thấy đoạn mã
Bạn cho tôi mượn500.000VNĐ
trông khá là khó đọc, và việc dùng để tạo nhiều khoảng trắng là một phương pháp không tối ưu. Với đoạn mã trên khi hiển thị ở màn hình của bạn có thể trông sẽ khá đẹp mắt, nhưng ở một số thiết bị khác có thể nó sẽ rất xấu.
Do đó sử dụng bạn cũng có thể sử dụng margin với padding để tạo khoảng cách trong HTML là một cách làm tốt hơn và đơn giản hơn rất nhiều (chi tiết xem ở phía bên dưới) và chỉ nên dùng để tạo khoảng trắng khi bạn muốn giữ lại các phần tử với nhau.
trong WordPress
Trình chỉnh sửa Gutenberg của WordPress tạo ra các non-breaking space trong bài viết một cách dễ dàng, thay vì dùng dấu cách, bạn hãy nhấn tổ hợp phím Option + Space trên Mac hoặc Ctrl + Shift + Space trên Windows.
Trong trình soạn thảo HTML ở các phiên bản cũ, việc chèn khoảng trắng có thể sẽ phức tạp hơn rất nhiều, bạn có thể thử chèn ngay vào trình chỉnh sửa. Tuy nhiên, nếu theme của bạn không có CSS chỉ định cách hiển thị nó, bạn có thể sẽ thấy mã code được hiển thị trên trang.
Một giải pháp khác mà mình nghĩ ra là tạo một shortcode xử lý đơn giản trong tập tin functions.php của theme:
// shortcodefunction 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 khoảng trắng không ngắt với ‘’.
Lưu ý: Bạn cũng có thể thay bằng
Các ký tự tạo khoảng trắng khác trong HTML
Khi tạo khoảng trắng giữa các từ hoặc các yếu tố khác, không chỉ có là tạo được khoảng trắng mà còn có rất nhiều HTML Entity khác làm được việc tương tự. Dưới đây là bản các HTML Entity được dùng phổ biến không kém :
TênHTML EntityEntity NumberTác dụng Tạo mội khoảng trắngEn space Tạo 2 khoảng trắngEm space Tạo 3 khoảng trắngNarrow no-break space– Gạch ngang3-per-em space Tương tự như figure space Tạo 2 khoảng trắngpunctuation space Tạo khoảng trắngthin space Tạo khoảng trắng mỏnghair space Tạo khoảng cách siêu mỏngBảng các ký tự tạo khoảng trắng khác trong HTML
Lưu ý: Tất cả các mã code ở trên đều tạo ra khoảng trắng, chúng chỉ khác nhau ở khoảng cách giữa các điểm
Cách tạo khoảng cách trong HTML
Tạo khoảng cách trong HTML không phải là việc làm đơn giản, điều này do hiện nay có quá nhiều thiết bị với kích thước màn hình khác nhau. Dưới đây là các giải pháp khác thay thế cho các HTML Entity đặc biệt là mà mình đề xuất:
Cellpadding
Cellpadding 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à bên rìa. Đây là một giải pháp khá phổ biến vì tài liệu HTML sử dụng tabel (bảng) rất nhiều, 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 ở trình duyệt chrome
nghĩa là khoảng cách giữa text và các bên là 12px
Cellpadding có một hạn chế làkhoảng cách của nó không thể bị ghi đè, do Cellpadding là mộtthuộc tínhủa HTML. Cho dù bạn có CSS kiểu gì đi chăng nữa.
Padding
Padding là một thuộc tính của CSS, bạn có thể tự do thoải mái ghi đè, nó cực kỳ hữu ích khi bạn tạo khoảng trắng HTML cho desktop và mobile lẫn table. Bạn có thể chỉ định khoảng cách khác nhau cho từng thiết bị một, để có một giao diện web đẹp cho từng thiết bị.
Xem thêm: Chèn Logo Vào Ảnh Hàng Loạt Bằng Phần Mềm Chèn Logo Vào Ảnh Hàng Loạt Cực Nhanh
Cú pháp CSS padding rất đơn giản như sau:
style=”padding:15px;”
Các thẻ td
Một phương pháp khác là với HTML ta có thẻ . Thông thường, thẻ 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 đây là giải pháp hiếm khi được sử dụng.
Đầu tiên và cũng là quan trọng nhất, các ô được xác định theo cách này không phải lúc nào cũng giữ được chiều cao của chúng, có những lúc việc nhập dữ liệu vào trong thẻ sẽ không có khoảng cách nào được tạo ra, khiến giao diện không được đúng như thiết kế.
Thứ hai việc sử dụng chúng đòi hỏi phải xây dựng 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 responsive cho nhiều thiết bị, bạn sẽ phải đặt các class và css rất nhiều.
Margin
Margin là một thuộc tính của CSS tương tự như Padding, sự khác biệt giữa margin và padding là padding tạo ra khoảng cách từ bên trong, còn margin là tạo ra khoảng cách từ bên ngoài vùng.
Cú pháp CSS margin như sau:
style=”margin:15px;”
Thẻ (break)
Thẻ là một cách phổ biến để tạo khoảng trắng trong HTML, nó thường hay được dùng để tạo ngắt giữa các văn bản.
Bạn chỉ cần thêm thẻ vào đoạn văn bản muốn ngắt.
Tại sao bạn thấy ký tự ở một số website
Nơi duy nhất bạn thường thấy và sử dụng là ở khu vực soạn thảo văn bản cho website dưới dạng mã code HTML, khi bạn làm đúng mã sẽ 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ác cú pháp của HTML không chính xác, vì vậy các tài liệu sẽ được hiển thị các bit bổ xung của mã HTML do đó bạn sẽ thấy trên.
Kết luận
Ở bài viết này hostingvietnam.vn đã giải thích rõ khái niệm là gì? cũng như tác dụ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) thì hãy theo dõi website hostingvietnam.vn để nhận được các hướng dẫn mới nhất và kinh nghiệm lập trình lâu năm của mình.
Xem thêm: +3 Cách Kiểm Tra Tài Khoản Mobifone Trả Sau ? Làm Thế Nào Để Tra Cứu Cước Mobifone Trả Sau
Bạn hãy like Fanpage và Group của hostingvietnam.vn để cùng thảo luận thêm với những lập trình viên khác nhé.
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.
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.
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.
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  
- Bốn khoảng trống – Nhập  
- Thụt đầu dòng – Nhập
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
