Thuộc tính line-height trong CSS xác định chiều cao dòng của các phần tử HTML khác nhau. Nó thường được sử dụng để đặt khoảng cách giữa các dòng văn bản. Chiều cao dòng có thể được đặt bằng cách sử dụng từ khóa, tỷ lệ phần trăm hoặc giá trị số.
Thuộc tính chiều cao dòng CSS cho phép các nhà phát triển xác định khoảng cách giữa hai phần tử nội tuyến trên một trang web. Các nhà phát triển thường sử dụng thuộc tính chiều cao dòng CSS để tăng hoặc giảm khoảng cách giữa các dòng văn bản trên trang web.
Hướng dẫn này sẽ thảo luận về cách sử dụng thuộc tính CSS line-height. Chúng tôi sẽ đề cập đến một ví dụ để giúp bạn bắt đầu. Khi đọc xong hướng dẫn này, bạn sẽ thành thạo trong việc sử dụng thuộc tính line-height trong mã của mình.
Chiều cao dòng CSS
Thuộc tính line-height trong CSS đặt chiều cao của một hộp dòng. Hộp dòng là các dòng tạo nên một hộp trong CSS. Phương pháp này thường được sử dụng để đặt khoảng cách giữa các dòng văn bản.
Việc điều chỉnh độ cao dòng cho phép bạn gián tiếp điều chỉnh khoảng cách giữa các dòng văn bản (hoặc các phần tử khác) trên trang web. Điều này giống như định dạng văn bản trong Microsoft Word thành khoảng cách đôi hoặc khoảng cách 1,15.
Cú pháp cho thuộc tính CSS line-height như sau:
line-height: lineHeight;
“LineHeight” đề cập đến giá trị độ dài đặt chiều cao dòng của một phần tử.
Ba loại giá trị bạn có thể sử dụng với thuộc tính line-height là chiều dài, số và tỷ lệ phần trăm:
81% người tham gia cho biết họ cảm thấy tự tin hơn về triển vọng công việc công nghệ của mình sau khi tham gia một cuộc thi đào tạo. Kết hợp với bootcamp ngay hôm nay.
Sinh viên tốt nghiệp bootcamp trung bình đã dành ít hơn sáu tháng để chuyển đổi nghề nghiệp, từ khi bắt đầu bootcamp đến khi tìm được công việc đầu tiên của họ.
| Value | Mô tả | Giá trị mẫu | Kết quả của Giá trị mẫu |
| Chiều dài | Đặt chiều cao dòng bằng đơn vị đo lường cụ thể (chẳng hạn như em, px và cm). | 10px, 15px, 20px | Nếu bạn chỉ định 10px, chiều cao dòng của bạn sẽ là 10px. |
| Số | Đặt chiều cao dòng bằng bội số của kích thước phông chữ. | 1, 1.8, 2 | Nếu kích thước phông chữ của bạn là 10px, chiều cao dòng của bạn sẽ tương ứng là 10px, 18px và 20px. |
| Phần trăm | Đặt chiều cao dòng dưới dạng phần trăm kích thước phông chữ của phần tử. | 30%, 50%, 110% | Nếu kích thước phông chữ của bạn là 10px, chiều cao dòng của bạn sẽ tương ứng là 3px, 5px và 11px. |
Ngoài ra, bạn có thể chỉ định từ khóa "bình thường". Từ khóa này chỉ định việc sử dụng mặc định của trình duyệt. Giá trị này thường khoảng 1,2, tùy thuộc vào trình duyệt mà người xem đang sử dụng.
Nếu bạn áp dụng thuộc tính chiều cao dòng cho một hộp, tất cả văn bản trong hộp đó sẽ sử dụng chiều cao dòng mà bạn đã chỉ định.
Lưu ý về khả năng tiếp cận
Thay đổi khoảng cách dòng là cách sử dụng phổ biến của thuộc tính line-height. Điều này là do bạn luôn muốn đảm bảo rằng có đủ khoảng cách giữa các dòng. Nếu không có đủ khoảng cách giữa các dòng, văn bản có thể khó đọc.
Văn bản khó đọc có ảnh hưởng đặc biệt nghiêm trọng đến những người bị khiếm thị. Khả năng truy cập phải luôn được cân nhắc khi bạn xây dựng một trang web.
Khi bạn đang sử dụng một số để đặt chiều cao dòng của một phần tử trong CSS, bạn không nên sử dụng bất kỳ giá trị nào thấp hơn 1,5. Điều này là do các giá trị thấp hơn 1,5 cho chiều cao dòng có thể khiến người đọc khiếm thị khó sử dụng trang web của bạn hơn.
Ví dụ CSSline-height
Giả sử chúng tôi đang thiết kế trang “Giới thiệu về chúng tôi” cho trang web của câu lạc bộ nấu ăn địa phương. Trang này chứa một tiêu đề theo sau là một đoạn văn bản mô tả về câu lạc bộ.
Chúng tôi muốn văn bản của chúng tôi được cách đều nhau. Vì vậy, chúng tôi quyết định đặt chiều cao dòng của đoạn văn bản trên trang web là 1,6rem. Chúng tôi có thể làm như vậy bằng cách sử dụng mã này:
<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;
}
Mã của chúng tôi trả về:Nút 
trong trình chỉnh sửa mã ở trên để xem đầu ra của mã HTML / CSS của chúng tôi.
Trong tệp HTML của mình, chúng tôi đã xác định tiêu đề “Giới thiệu về chúng tôi” bằng thẻ
. Sau đó, chúng tôi viết mô tả về Fantastic Chefs và đính kèm mô tả đó trong các thẻ HTML
.
Trong tệp CSS của chúng tôi, chúng tôi đã xác định một quy tắc. Quy tắc của chúng tôi sử dụng hai thuộc tính CSS. Chúng tôi đặt chiều cao dòng thành 1,6rem và kích thước phông chữ thành 16px cho tất cả các thẻ HTML
.
Đơn vị đo lường "rem" mà chúng tôi đã sử dụng với thuộc tính line-height đặt chiều cao dòng so với kích thước phông chữ của phần tử gốc. “Rem” là viết tắt của “phần tử gốc”. Vì vậy, vì kích thước phông chữ của chúng tôi là 16px, chiều cao dòng của chúng tôi cho đoạn văn bản này là 25,6px (16px * 1,6).
Văn bản trong đoạn văn trên được đặt khoảng cách thích hợp và không chồng chéo lên nhau.
Chúng tôi cũng có thể áp dụng chiều cao dòng cho phần tử
của chúng tôi sẽ bị ảnh hưởng.
Kết luận
Thuộc tính line-height trong CSS đặt chiều cao của một hộp dòng. Thông thường, thuộc tính này được sử dụng để đặt khoảng cách giữa các dòng văn bản trong một đoạn văn hoặc tiêu đề. Chiều cao dòng có thể được đặt bằng cách sử dụng từ khóa bình thường, phần trăm, độ dài hoặc giá trị số.
Hướng dẫn này đã thảo luận những điều cơ bản về thuộc tính chiều cao dòng CSS và cách bạn có thể sử dụng nó trong mã của mình. Bây giờ bạn đã có kiến thức cần thiết để bắt đầu sử dụng thuộc tính CSS line-height như một chuyên gia!
Bạn đang muốn trở thành một nhà phát triển web? Hãy xem hướng dẫn Cách học CSS của chúng tôi để biết các mẹo và hướng dẫn của chuyên gia về các khóa học và tài nguyên học tập hàng đầu.