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ữ.
Cách sử dụng Line-height trong CSS chi tiết
Để 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
Thay đổi thuộc tính line -height trong CSS nhằm giãn dòng bạn có thể thực hiện lệnh sau đây:
<style> .my-height { font-size: 25px; line-height: 150%; } </style>
<p class=”my-height”>Kiểm tra chiều cao dòng, giãn dòng. Chiều cao dòng chữ được thiết
lập bởi thuộc tính line-height. Có thể nhập vào giá trị tuyệt đối (20px, 1.2em), giá trị
tương đối tính toán theo cỡ chữ (font-size) như 1.2, 2, 150%, 200% …</p>
<p class=”my-height”>Line-height để dễ dọc, thiết lập trong khoảng 1 – 1.2</p>
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.