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à 10px * 1.5 = 15px. Chà, còn khoảng trắng nhìn thấy được giữa các dòng văn bản sẽ là 5px: 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.