Thuộc tính lineHeight (CSS line-height) kiểm soát chiều cao của hộp dòng (line box), quyết định khoảng cách dọc giữa các dòng văn bản.
Ví dụ minh họa
Nhấn nút để đặt line-height = 2 (gấp đôi cỡ chữ) cho đoạn văn nhiều dòng:
<!DOCTYPE html>
<html>
<body>
<h1>Tiêu đề 1</h1>
<p id="myID">Đây là văn bản demo.<br>Đây là văn bản demo<br>Đây là văn bản demo</p>
<button type="button" onclick="display()">Đặt khoảng cách giữa các dòng</button>
<script>
function display() {
document.getElementById("myID").style.lineHeight = "2";
}
</script>
</body>
</html>
Các giá trị lineHeight
| Giá trị | Mô tả |
|---|---|
normal | Tùy trình duyệt (~1.2) |
number (không đơn vị) | Hệ số nhân cỡ chữ (khuyến khích). VD: 1.5 |
length (px, em, rem) | Chiều cao cố định. Rủi ro khi cỡ chữ thay đổi. |
% | Phần trăm cỡ chữ. Tương tự number nhưng kế thừa giá trị tính toán. |
Best practice: Dùng số không đơn vị (1.5, 1.6) để tỷ lệ tự động điều chỉnh khi font-size thay đổi.