Các line-height
bất động sản xác định số lượng của không gian bên trên và bên dưới các yếu tố nội tuyến. Đó là, các phần tử được đặt thành display: inline
hoặc display: inline-block
. Thuộc tính này thường được sử dụng nhất để đặt đầu dòng cho các dòng văn bản.
p ( line-height: 1.5; )
Các line-height
bất động sản có thể chấp nhận các giá trị từ khóa normal
hoặc none
cũng như một số, chiều dài, hoặc tỷ lệ phần trăm.
Theo thông số kỹ thuật, giá trị “bình thường” không chỉ là một giá trị cụ thể duy nhất được áp dụng cho tất cả các phần tử, mà còn tính toán thành một giá trị “hợp lý” tùy thuộc vào kích thước phông chữ được đặt (hoặc kế thừa) trên phần tử.
Giá trị độ dài có thể được xác định bằng bất kỳ đơn vị CSS hợp lệ nào (px, em, rem, v.v.).
Giá trị phần trăm là kích thước phông chữ của phần tử nhân với phần trăm. Ví dụ:
Kiểm tra cây bút này!
Trong bản trình diễn ở trên, ba đoạn có độ cao dòng của chúng được đặt lần lượt là 150%, 200% và 250%. Phần tử body có kích thước phông chữ được xác định là 20px. Điều này có nghĩa là chiều cao dòng được tính cho các đoạn văn lần lượt là 30px, 40px và 50px.
Đèn chiếu sáng đường thẳng
Phương pháp được khuyến nghị để xác định chiều cao dòng là sử dụng một giá trị số, được gọi là chiều cao dòng "không có đơn vị". Giá trị số có thể là bất kỳ số nào, kể cả số dựa trên thập phân, như được sử dụng trong ví dụ mã đầu tiên trên trang này.
Chiều cao dòng không đơn vị được khuyến nghị do thực tế là các phần tử con sẽ kế thừa giá trị số thô, thay vì giá trị được tính toán. Với điều này, các phần tử con có thể tính toán chiều cao dòng của chúng dựa trên kích thước phông chữ được tính toán của chúng, thay vì kế thừa một giá trị tùy ý từ phần tử mẹ có nhiều khả năng cần ghi đè hơn.
Hỗ trợ trình duyệt
Trình duyệt Chrome | Safari | Firefox | Opera | I E | Android | iOS |
---|---|---|---|---|---|---|
Làm | Làm | Làm | Làm | Làm | Làm | Làm |
IE6 / 7 sẽ tính sai chiều cao dòng trên các phần tử được thay thế (ví dụ: điều khiển biểu mẫu) nằm trong dòng.