Hướng dẫn html space between lines - html khoảng cách giữa các dòng

  • Trang chủ
  • Tham khảo
  • CSS
  • Thuộc tính line-height

Nội dung chính

  • Định nghĩa và sử dụng
  • Cấu trúc
  • Trình duyệt hỗ trợ
  •   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

Định nghĩa và sử dụng

Cấu trúc

Cấu trúc

tag {
    line-height: giá trị;
}

Trình duyệt hỗ trợ

  là gì?Tác dụng của   trong HTMLKhi 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 HTMLCách tạo khoảng cách trong HTMLCellpaddingCác thẻ td
Thẻ (break)Tại sao bạn thấy ký tự   ở một số websiteKết luận
Thuộc tính line-height thiết lập chiều cao giữa các dòng.Với giá trị như sau:Thuộc tính
giá trịVí dụMô tả

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

  trong WordPress

<html>
<head></head>
<body>
<p>HỌC WEB CHUẨN<br />
HTML - HyperText Markup Language<br />
XHTML - Extensible HyperText Markup Language<br />
CSS - Cascading Style Sheets<br />
JS - JavaScript</p>
</body>
</html>

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

Cách tạo khoảng cách trong HTML
HTML - HyperText Markup Language
XHTML - Extensible HyperText Markup Language
CSS - Cascading Style Sheets
JS - JavaScript

Cellpadding

Các thẻ td

Cách tạo khoảng cách trong HTML
HTML - HyperText Markup Language
XHTML - Extensible HyperText Markup Language
CSS - Cascading Style Sheets
JS - JavaScript

Trình duyệt hỗ trợ

  là gì?

Tác dụng của   trong HTML

Khi nào bạn không nên sử dụng  Khi chọn lựa và sử dụng một mấu Template Blogger sẵn có, đôi lúc bạn sẽ thấy thật là xấu khi các dòng chữ trong bài viết cứ dính sát vào nhau nhìn rối mắt.  Đê tăng khoảng cách giữa các dòng ( Line Spacing), bạn hãy làm theo hướng dẫn đơn giản sau:

Hướng dẫn html space between lines - html khoảng cách giữa các 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 HTMLBlogger  >>  Thiết kế (Design) >>  Chỉnh sửa HTML (Edit HTML)

Cellpadding.post

Các thẻ td

Thẻ (break)


Tại sao bạn thấy ký tự   ở một số website
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
}
...
.post p {
margin:0 0 .75em;
line-height:1.6em;
}

Kết luận


Thuộc tính line-height thiết lập chiều cao giữa các dòng.
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
line-height:1.6em;
}
...
.post p {
margin:0 0 .75em;
}

Với giá trị như sau:

Thuộc tínhXEM TRƯỚC (Preview) để xem đã ưng ý chưa. Nếu đã ưng ý hãy  Lưu Mẫu(Save Template).

giá trị

Ví dụ  là gì? và cách tạo khoảng cách (khoảng trắng) trong html nhé.

  •   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
    • Các thẻ td
    • Thẻ (break)
    • Thẻ (break)
  • Tại sao bạn thấy ký tự   ở một số website
  • Kết luận

  là gì?

Tác dụng của   trong HTML 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

Khi nào bạn không nên sử dụng   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 gbaydev tìm hiểu ví dụ sau:

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

  trong WordPress

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

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

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

Cách tạo khoảng cách trong HTML500.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ượn
500.000 VNĐ

Cellpadding  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:

<p>Bạn cho tôi mượn                                  500.000 VNĐ</p>

Các thẻ td

Thẻ (break)

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ụ:   nhiều lần để tạo ra khoảng cách mong muốn, ví dụ: 

<p>Bạn cho tôi mượn&nbsp;&nbsp;&nbsp;500.000&nbsp;VNĐ</p>

kết quả sẽ được như ý bạn.

Hình ảnh: ví dụ về dùng nhiều   để tạo nhiều khoảng trắng

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ư ý. 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ã

<p>Bạn cho tôi mượn&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;500.000&nbsp;VNĐ</p>

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.  để 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.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. 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:shortcode xử lý đơn giản trong tập tin functions.php của theme:

//[nbsp] shortcode
function nbsp_shortcode( $atts, $content = null ) {
$content = '&nbsp';
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 ‘[nbsp]’.

Lưu ý: Bạn cũng có thể thay   bằng   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  :  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ên HTML Entity Entity Number Tác dụng
    Tạo mội khoảng trắng
En space Tạo 2 khoảng trắng
Em space Tạo 3 khoảng trắng
Narrow no-break space Tạo 3 khoảng trắng
Narrow no-break space Gạch ngang 3-per-em space
Tương tự như   Tạo 2 khoảng trắng
Em space Tạo 3 khoảng trắng
Narrow no-break space Gạch ngang 3-per-em space
Tương tự như   figure space
  trong HTML

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

punctuation space

Tạo khoảng trắ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à 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ụ:

<html>
<head></head>
<body>
<p>HỌC WEB CHUẨN<br />
HTML - HyperText Markup Language<br />
XHTML - Extensible HyperText Markup Language<br />
CSS - Cascading Style Sheets<br />
JS - JavaScript</p>
</body>
</html>
0

thin space

text và các bên là 12px

Tạo khoảng trắng mỏng 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. 

hair space

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ị.

padding rất đơn giản như sau:

Tạo khoảng cách siêu mỏng

Bả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

. 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á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:

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ế.

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ụ:

Kết quả khi xem ở trình duyệt chrome

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.
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.
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.  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 gbaydev đã 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,… gbaydev đã 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 gbaydev để 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.gbaydev để 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.

Bạn hãy like Fanpage và Group của Gbaydev để cùng thảo luận thêm với những lập trình viên khác nhé.FanpageGroup của Gbaydev để cùng thảo luận thêm với những lập trình viên khác nhé.

Thank you!