Thuộc tính Line-height trong CSS

Line-height trong CSS là một thuộc tính thường được sử dụng. Nó giúp chúng ta trình bày văn bản đẹp mắt và dễ đọc hơn. Bài viết này bạn sẽ được tìm hiểu về thuộc tính line-height là gì nhé!

Line-height là gì?

Line height được dùng để tạo khoảng cách giữa các dòng chữ với nhau.

Thuộc tính line-height trong CSS

Như trong hình bạn sẽ thấy khoảng trống của dòng 1 và dòng 2 đó chính là line height

Cú pháp:

line-height: normal|number|length;

Giải thích:

normal: đây là giá trị mặc định

number: số nhân với kích thước font tạo ra giá trị line-height

length: sử dụng các đơn vị như em, px

Cách sử dụng Line-height

Chạy đoạn code HTML và CSS sau:

<!DOCTYPE html>
<html>
<head>
<title>Ví dụ Line-height</title>
<style>
.l1 {
line-height: 50px;
border: 1px solid green;
}
.l2 {
line-height: 5em;
border: 1px solid red;
}
.l3 {
line-height: 10;
border: 1px solid blue;
}
</style>
</head>
<body>

<p class="l1">This is a paragraph 1.</p>
<p class="l2">This is a paragraph 2.</p>
<p class="l3">This is a paragraph 3.</p>

</body>
</html>

Kết quả:

Qua ví dụ trên bạn đã biết cách sử dụng thuộc tính line-height CSS chưa? Không quá khó phải không. Chúc bạn học tốt CSS!

Cùng chủ đề


Tags: