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 này nhé!

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

Chạy ví dụ 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 chưa? Không quá khó phải không. Chúc bạn học tốt CSS!

0 0 vote
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments