Thuộc tính CSS line-height

Định nghĩa và cách sử dụng

Thuộc tính line-height đặt khoảng cách giữa các dòng (chiều cao dòng).

Chú ý:Không được phép sử dụng giá trị âm.

Giải thích

Thuộc tính này sẽ ảnh hưởng đến bố cục hộp dòng. Khi được áp dụng cho phần tử khối, nó xác định khoảng cách tối thiểu giữa các đường cơ bản của phần tử này thay vì khoảng cách tối đa.

Sự chênh lệch giữa giá trị tính toán của line-height và font-size (trong CSS được gọi là khoảng cách dòng) được chia làm hai nửa, thêm vào trên và dưới nội dung dòng văn bản. Hộp nhỏ nhất có thể chứa nội dung này là hộp dòng.

Giá trị số nguyên thuần xác định một yếu tố phóng đại, các phần tử con sẽ kế thừa yếu tố phóng đại này thay vì giá trị tính toán.

Xem thêm:

Hướng dẫn CSS:CSS văn bản

Hướng dẫn tham khảo HTML DOM:Thuộc tính lineHeight

Ví dụ

Đặt chiều cao dòng bằng phần trăm:

p.small {line-height:90%}
p.big {line-height:200%}

Thử ngay

（Xem thêm nhiều ví dụ tại cuối trang）

Ngữ pháp CSS

line-height: normal|number|length|initial|inherit;

Giá trị thuộc tính

Giá trị Mô tả
normal Mặc định. Đặt khoảng cách dòng hợp lý.
number Đặt số, số này sẽ được nhân với kích thước font hiện tại để đặt khoảng cách dòng.
length Đặt khoảng cách dòng cố định.
% Phần trăm khoảng cách dòng dựa trên kích thước font hiện tại.
inherit Định nghĩa rằng giá trị thuộc tính line-height nên được kế thừa từ phần tử cha.

Chi tiết kỹ thuật

Giá trị mặc định: normal
Kế thừa: yes
Phiên bản: CSS1
Ngữ pháp JavaScript: object.style.lineHeight="2"

Ví dụ thử

Đặt khoảng cách dòng bằng phần trăm
Ví dụ này minh họa cách sử dụng giá trị phần trăm để đặt khoảng cách dòng trong đoạn văn.
Đặt khoảng cách dòng bằng giá trị pixel
Ví dụ này minh họa cách sử dụng giá trị pixel để đặt khoảng cách dòng trong đoạn văn.
Đặt khoảng cách dòng bằng số
Ví dụ này minh họa cách sử dụng một giá trị số để đặt khoảng cách dòng trong đoạn văn.

Hỗ trợ trình duyệt

Số trong bảng chỉ ra phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính này.

Chrome IE / Edge Firefox Safari Opera
1.0 4.0 1.0 1.0 7.0