Thuộc tính CSS line-height xác định line height của các HTML element. Thường dùng set khoảng cách giữa các dòng text. Line height có thể set bằng keyword, percentage, hoặc numerical values.
CSS line-height property cho phép developer định nghĩa khoảng cách giữa 2 inline element trên web page. Thường dùng tăng/giảm khoảng cách giữa dòng text.
Tutorial thảo luận cách dùng line-height property với ví dụ. Đọc xong bạn sẽ master dùng line-height trong code.
CSS line-height
line-height property set chiều cao của line box. Line box là các dòng cấu thành box trong CSS. Thường dùng set khoảng cách giữa dòng text.
Điều chỉnh line height gián tiếp adjust spacing giữa dòng text (hoặc element khác) trên web page. Tương tự format text trong MS Word: double spaced hoặc 1.15 spaced.
Cú pháp line-height:
line-height: lineHeight;
"lineHeight" = length value set line height của element.
3 loại value dùng với line-height: length, number, percentage:
| Value | Mô Tả | Example Values | Kết Quả |
|---|---|---|---|
| Length | Set line height dùng unit cụ thể (em, px, cm). | 10px, 15px, 20px | Nếu 10px → line height = 10px. |
| Number | Set line height = multiple của font size. | 1, 1.8, 2 | Font size 10px → line height 10px, 18px, 20px. |
| Percentage | Set line height = % của font size element. | 30%, 50%, 110% | Font size 10px → line height 3px, 5px, 11px. |
Hoặc dùng keyword normal – browser default (thường ~1.2, tùy browser).
Áp dụng line-height cho box → all text trong box dùng line height đó.
Lưu Ý Về Accessibility (Khả Năng Tiếp Cận)
Thay đổi line spacing là use case phổ biến của line-height. Luôn muốn đảm bảo khoảng cách đủ giữa dòng. Không đủ space → text khó đọc.
Text khó đọc ảnh hưởng nghiêm trọng đến người khiếm thị. Accessibility luôn là cân nhắc khi build website.
Khi dùng number set line height, KHÔNG nên dùng giá trị < 1.5. Vì giá trị < 1.5 làm khó khăn cho visually-impaired readers.
Ví Dụ line-height CSS
Giả sử design "About Us" page cho cooking club local. Page có heading + paragraph mô tả club.
Muốn text spaced properly. Set line height paragraph = 1.6rem.
Code:
<html>
<h2>About Us</h2>
<p>Fantastic Chefs, founded in 2007, is a cooking club local to Seattle, WA. Our cooking club meets on a weekly basis to share recipes, discuss cooking techniques, and make food together. Every Saturday afternoon, our members gather at our Seattle-based kitchen.</p>
<style>
p { font-size: 16px; line-height: 1.6rem; }
</style>
Output: 
Bấm Run để xem output.
HTML: <h2> "About Us", <p> mô tả Fantastic Chefs. CSS: 1 rule cho <p> – line-height 1.6rem, font-size 16px.
Unit "rem" = relative to font-size của root element. "rem" = "root em". Font size 16px → line height = 25.6px (16 × 1.6).
Text paragraph spaced adequately, không overlap.
Có thể apply line-height cho <div> trong ví dụ → all text trong <div> (cả title và <p>) bị ảnh hưởng.
Kết Luận
CSS line-height property set chiều cao line box. Thường dùng set spacing giữa dòng text trong paragraph/heading. Line-height set bằng keyword normal, percentage, length, hoặc numerical value.
Tutorial thảo luận cơ bản line-height và cách dùng. Bạn đã có knowledge dùng line-height như expert!
Muốn thành web developer? Xem How to Learn CSS guide – expert tips và guidance top learning resources/courses.