Thuộc tính line-height

Thuộc tính line-height thiết lập khoảng cách giữa các dòng văn bản (khoảng cách dòng).

Thuộc tính không đặt khoảng cách giữa các dòng văn bản, như có thể tưởng tượng, nó đặt chiều cao của dòng văn bản. Điều này có nghĩa là khoảng cách thực tế giữa các dòng sẽ được tính như sau: line-height - font-size = khoảng cách giữa các dòng văn bản. Hoặc ngược lại line-height = font-size + khoảng cách giữa các dòng văn bản.

Cú pháp

bộ chọn {
	line-height: giá trị;
}

Giá trị

Giá trị của thuộc tính là bất kỳ đơn vị kích thước nào. Khi chỉ định giá trị bằng % thì khoảng cách dòng sẽ tính bằng phần trăm cỡ chữ.

Ngoài ra, có thể đặt giá trị là bất kỳ số nào lớn hơn 0. Trong trường hợp này, nó được hiểu là hệ số nhân của cỡ chữ. Ví dụ: nếu font-size có giá trị 20px, và line-height - 1.5, thì điều đó tương đương với việc viết line-height: 30px (20px * 1.5 = 30px).

Mặc định, thuộc tính có giá trị normal, trong trường hợp này trình duyệt tự động chọn khoảng cách dòng.

Ví dụ

Trong ví dụ này, khoảng cách giữa các dòng văn bản sẽ là line-height - font-size = 38px - 18px = 20px:

<p>
	some long text
</p>

p {
	font-size: 18px;
	line-height: 35px;
	text-align: justify;
}

Ví dụ

Giảm khoảng cách xuống 25px - 18px = 7px:

<p>
	some long text
</p>

p {
	font-size: 18px;
	line-height: 25px;
	text-align: justify;
}

Ví dụ

Trong ví dụ này, khoảng cách giữa các dòng văn bản sẽ là line-height - font-size = 18px - 18px = 0px - các dòng gần như dính vào nhau (các phần đuôi của chữ trên dòng sẽ chạm vào phần đuôi của chữ dưới):

<p>
	some long text
</p>

p {
	font-size: 18px;
	line-height: 18px;
	text-align: justify;
}

Ví dụ

Trong ví dụ này, giá trị line-height - là hệ số 1.5 của cỡ chữ. Do đó line-height sẽ tương đương với font-size * 1.5 = 18px * 1.5 = 27px. Còn khoảng cách thực tế giữa các dòng sẽ là line-height - font-size = 27px - 18px = 9px:

<p>
	some long text
</p>

p {
	font-size: 18px;
	line-height: 1.5;
	text-align: justify;
}

Ví dụ

Tăng hệ số nhân:

<p>
	some long text
</p>

p {
	font-size: 18px;
	line-height: 2.5;
	text-align: justify;
}

Ví dụ

Nếu làm cho line-height nhỏ hơn font-size, thì các dòng sẽ chồng lên nhau:

<p>
	some long text
</p>

p {
	font-size: 18px;
	line-height: 13px;
	text-align: justify;
}