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!

Related Posts

Hover-CSS-1

Hiệu ứng rê chuột trong CSS

CSS là ngôn ngữ trang trí với nhiều hiệu ứng hay. Bạn sẽ thường gặp nhất là khi di chuyển chuột vào một liên kết (Link) hay…

Mẫu Form đăng nhập HTML và CSS đẹp mắt

Trong một số bài viết trên blog này mình đã chia sẻ về cách tạo một Form đăng nhập đơn giản. Nhưng để có một Form đẹp…

form-lien-he-4

Hướng dẫn tạo form liên hệ bằng HTML, CSS

Form liên hệ là một chức năng không thể thiếu cho blog, website. Thông qua Form độc giả, khách hàng có thể yêu cầu admin trợ giúp…

css-code-1

8 Cách viết CSS chuẩn, dễ đọc và tối ưu

Nói tới xây dựng giao diện phía Front-end không thể thiếu CSS. Ngôn ngữ được sử dụng phổ biến để sắp xếp bố cục các phần tử…

Thuộc tính text-shadow trong CSS

Trong những lúc rảnh rỗi mình thường hay nghịch ngợm một vài thứ hay ho tìm thấy trên internet. Đối với CSS thì text-shadow cũng là thuộc…

Thuộc tính Overflow trong CSS

Khi thiết kế web với HTML và CSS đôi khi chúng ta sẽ gặp phải tình trạng văn bản (text) bị tràn ra khỏi phần tử HTML…