Bất kỳ ai khi nghiên cứu về lĩnh vực lập trình, công nghệ số thì có lẽ thuật ngữ CSS không còn xa lạ. Bài viết ngày hôm nay của Wiki Lanit sẽ tìm hiểu thêm một thuật ngữ khác cũng rất quan trọng, đó là Line – height trong CSS.
Line-height trong CSS là gì?
Line-height trong CSS là thuộc tính dùng để điều chỉnh khoảng cách giữa các dòng chữ trong phần nội dung trên trang web. Điều này giúp cải thiện khả năng đọc và tạo sự đồng nhất trên các thiết bị khác nhau. Thuộc tính này có thể được thiết lập bằng các đơn vị đo lường như pixel, em, rem hoặc percentage. Việc điều chỉnh line-height cho các phần tử như tiêu đề, đoạn văn bản, mã HTML hoặc liên kết giúp cải thiện trải nghiệm người dùng và tạo ra giao diện web chuyên nghiệp và hấp dẫn hơn.
Cấu trúc của Line – height trong CSS
Cú pháp sử dụng thuộc tính line-height như sau:
selector {
line-height: value;
}
Trong đó:
- selector là phần tử HTML hoặc lớp CSS được chọn để áp dụng thuộc tính line-height.
- value là giá trị được thiết lập cho khoảng cách giữa các dòng chữ.
Hướng dẫn chi tiết cách sử dụng Line-height trong CSS
Để sử dụng thuộc tính line-height , ta thực hiện các bước sau:
Bước đầu tiên hãy chọn phần tử cần áp dụng thuộc tính line-height.
Sử dụng cú pháp:
tag-selector {
line-height: value;
}
Trong đó, value có thể là các loại giá trị sau:
- Giá trị mặc định: normal
- Giá trị số (pixel): ví dụ 20px
- Giá trị phần trăm: ví dụ 150%
- Giá trị chiều dài: ví dụ 1.5em
- Kế thừa (inherit) giá trị từ phần tử cha
Ví dụ: Để thiết lập chiều cao của mỗi dòng chữ trong phần tử p là 25px:
p {
line-height: 25px;
}
Nếu muốn sử dụng giá trị phần trăm, bạn có thể thay thế giá trị số 25px bằng giá trị tương ứng, ví dụ 150%.
Lưu ý rằng: Việc thiết lập giá trị line-height có thể ảnh hưởng đến độ dài của nội dung. Vì vậy, cần cân nhắc để phù hợp với thiết kế của trang web.
Một số ví dụ khác về Line – height trong CSS
Dưới đây là một số ví dụ về cách bạn có thể sử dụng line-height để kiểm soát khoảng cách giữa các dòng trong văn bản:
Giá trị cụ thể:
p {
line-height: 1.5;
}
* Chiều cao dòng là 1.5 lần kích thước của font
Sử dụng đơn vị px:
h1 {
line-height: 30px;
}
* Chiều cao dòng là 1.5 lần kích thước của font
Sử dụng đơn vị em
article {
line-height: 1.2em;
}
* Chiều cao dòng là 1.2 lần kích thước của font chữ của phần tử cha
Sử dụng đơn vị rem
div {
line-height: 1.2rem;
}
* Chiều cao dòng là 1.2 lần kích thước của font chữ của phần tử gốc (root element)
Sử dụng phần trăm
li {
line-height: 150%;
}
* Chiều cao dòng là 150% kích thước của font
Giảm khoảng cách giữa các dòng
p {
line-height: 1;
}
* Chiều cao dòng bằng với kích thước của font, giảm khoảng cách giữa các dòng
Kết luận
Trên đây là mọi thông tin bạn cần biết về Line – height trong CSS, Wiki Lanit hy vọng đã mang lại thông tin hữu ích tới bạn. Nếu có bất cứ thắc mắc hãy bình luận để Wiki Lanit giải đáp và đừng quên theo dõi để cập nhật nhiều nội dung thú vị hơn nữa nhé!
Comments are closed.