Bài 20: Cách sử dụng line-height trong css

Cách sử dụng Icons trong css

Trong CSS, line-height là thuộc tính được sử dụng để xác định khoảng cách giữa các dòng văn bản trong một khối văn bản. Thuộc tính này có thể được sử dụng để điều chỉnh khoảng cách giữa các dòng, tạo ra hiệu ứng đọc dễ đọc hơn và tăng khả năng trình bày của trang web.

Cách sử dụng line-height trong CSS như sau:

selector {
  line-height: value;
}

Trong đó, selector là bộ chọn CSS cho phần tử muốn áp dụng line-height, và value là giá trị của line-height. value có thể là một số, một đơn vị đo lường (ví dụ: px, em, rem), hoặc một giá trị phần trăm.

Có một số cách sử dụng line-height phổ biến như sau:

1. Sử dụng line-height để tạo khoảng cách giữa các dòng văn bản:

p {
  line-height: 1.5;
}

Trong đó, giá trị 1.5 đặt khoảng cách giữa các dòng văn bản là 1.5 lần kích thước của font chữ.

2. Sử dụng line-height để tạo khoảng cách giữa các dòng và chữ trong các khối văn bản:

h1 {
  line-height: 2;
  letter-spacing: 0.1em;
}

Trong đó, giá trị 2 đặt khoảng cách giữa các dòng văn bản là 2 lần kích thước của font chữ. Đồng thời, thuộc tính letter-spacing được sử dụng để tạo khoảng cách giữa các chữ trong khối văn bản.

3. Sử dụng line-height để tạo hiệu ứng trang trí:

blockquote {
  line-height: 2;
  border-left: 3px solid #ccc;
  padding-left: 1em;
}

Trong đó, giá trị 2 đặt khoảng cách giữa các dòng văn bản là 2 lần kích thước của font chữ. Đồng thời, thuộc tính border-left và padding-left được sử dụng để tạo hiệu ứng trang trí cho khối văn bản.