Giá trị line-height không đơn vị trong CSS
Giá trị của thuộc tính line-height không
nhất thiết phải là một con số kèm theo
đơn vị. Bạn cũng có thể chỉ cần viết một số
hoặc một phân số. Trong trường hợp này, giá trị thực tế của
line-height có thể được tìm thấy bằng cách nhân
nó với giá trị của font-size.
Ví dụ, font-size là 10px,
và line-height là 1.5. Trong
trường hợp này, giá trị thực của line-height
sẽ là . Chà,
còn khoảng trắng nhìn thấy được giữa các dòng
văn bản sẽ là 10px * 1.5 = 15px5px: .
15px - 10px
= 5px
Ưu điểm của cách thiết lập line-height này
là khi kích thước font chữ thay đổi thì
khoảng cách giữa các dòng cũng sẽ tự động thay đổi theo.
Hãy cùng xem cách áp dụng những điều đã mô tả qua ví dụ:
<p>
some long text
</p>
p {
font-size: 20px;
line-height: 1.5;
text-align: justify;
width: 400px;
}
:
Giả sử kích thước font chữ cho các đoạn văn là 30px.
Hãy thiết lập thuộc tính line-height sao cho
khoảng trắng nhìn thấy được giữa các đoạn văn
bằng 15px. Sử dụng giá trị
line-height không đơn vị cho việc này.