Thuộc tính line-height trong CSS
Trần Thị Vân - 1367
- 13/07/2025
Chức năng của Thuộc tính line-height trong CSS
Thuộc tính line-height trong CSS dùng để quy định kích thước chiều cao của một dòng văn bản trong phần tử HTML, dòng chữ sẽ nằm giữa kích thước chiều cao đã quy định, bạn có thể dùng đơn vị px, % để quy định kích thước chiều cao.
Cú pháp của Thuộc tính line-height trong CSS
line-height: giatri;
giatri: Giá trị dùng để quy định kích thước chiều cao của một dòng văn bản trong phần tử HTML (Ví dụ: 23px, 30px, normal, 1.9, 80%, 200%,...)
Ví dụ Thuộc tính line-height trong CSS
line-height:23px;
line-height:40px;
line-height:60px;
line-height:normal;
line-height:1.9;
line-height:80%;
line-height:200%;
<!DOCTYPE html>
<html>
<head>
<title>Chạy thử Ví dụ Thuộc tính line-height trong CSS</title>
<style>
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
div{width:100%; float:left;background:green; color:#fff; margin-bottom:15px; height:auto}
</style>
</head>
<body>
<h1>Chạy thử Ví dụ Thuộc tính line-height trong CSS</h1>
<p>Dùng để quy định kích thước chiều cao của một dòng văn bản trong phần tử HTML, dòng chữ sẽ nằm giữa kích thước chiều cao đã quy định, bạn có thể dùng đơn vị px, % để quy định kích thước chiều cao:</p>
<div style="line-height:23px;">line-height:23px;</div>
<div style="line-height:40px;">line-height:40px;</div>
<div style="line-height:60px;">line-height:60px;</div>
<div style="line-height:normal;">line-height:normal;</div>
<div style="line-height:1.9;">line-height:1.9;</div>
<div style="line-height:80%;">line-height:80%;</div>
<div style="line-height:200%;">line-height:200%;</div>
</body>
</html>
Cách sử dụng line-height trong CSS hiệu quả
Giá trị line-height không nên được chọn theo một con số cố định cho mọi thành phần. Cùng một khoảng cách dòng có thể phù hợp với tiêu đề nhưng lại khiến đoạn văn khó đọc. Khi thiết kế giao diện, nên cân nhắc kích thước chữ, độ dài nội dung và không gian hiển thị để tạo khoảng cách vừa đủ.
Chọn giá trị line-height phù hợp
Với nội dung văn bản thông thường, có thể bắt đầu bằng giá trị tương đối thay vì đặt chiều cao dòng cố định bằng đơn vị px. Cách này giúp khoảng cách giữa các dòng tự điều chỉnh khi kích thước chữ thay đổi.
p {
font-size: 16px;
line-height: 1.6;
}
Đối với tiêu đề, giá trị line-height thường thấp hơn đoạn văn để các dòng không bị tách quá xa. Với nội dung nhiều dòng, nên kiểm tra trực tiếp trên giao diện thay vì chỉ dựa vào con số mặc định.
Line-height và khả năng hiển thị trên thiết bị
Khoảng cách dòng cần được kiểm tra trên cả màn hình lớn và thiết bị di động. Khi chiều rộng màn hình giảm, văn bản có thể xuống nhiều dòng hơn, vì vậy một giá trị quá nhỏ sẽ làm các dòng bị dính vào nhau, còn giá trị quá lớn lại khiến nội dung kéo dài không cần thiết.
Với giao diện responsive, sử dụng giá trị không có đơn vị thường linh hoạt hơn vì nó được tính dựa trên kích thước chữ của chính phần tử. Khi thay đổi font-size ở từng thiết bị, khoảng cách dòng cũng thay đổi theo.
p {
font-size: 16px;
line-height: 1.6;
}
@media (max-width: 768px) {
p {
font-size: 15px;
line-height: 1.55;
}
}
Quan trọng nhất là đọc thử nội dung ở kích thước màn hình thực tế. Nếu người đọc phải mất nhiều thời gian để phân biệt các dòng hoặc cảm thấy văn bản quá thưa, hãy điều chỉnh lại line-height thay vì áp dụng một giá trị giống nhau cho toàn bộ website.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính line-height trong CSS.
- 0 Bình luận
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *
