Giãn dòng với thuộc tính line-height trong CSS

Thuộc tính line-height chiều cao dòng trong CSS

Thuộc tính text-height thiết lập chiều cao của dòng chữ (hình hộp từng dòng chứa chữ).

Cú pháp:

line-height: normal | number | length | percentage | inherit

Các giá trị text-height:

• normal

  Giá trị khởi tạo tuỳ thuộc vào trình duyệt. Thường nó tương đương với giá trị số trong khoảng 1 - 1.2
• number: một giá trị số (như 1, 1.2, 2, 3 ...)

  Chiều cao của dòng được xác định bằng số đó nhân với giá trị font-size.

  .my-height {
      font-size: 14px;    /* cỡ chữ 14px */
      line-height: 1.2;   /* chiều cao dòng = 1.2 * 14 = 16.8px */
  }
  

• length: một giá trị chiều dài (như 14px, 1.2em, 20rem ...)

  Chiều cao của dòng được xác định bằng chính giá trị thiết lập, độc lập với font-size.

  .my-height {
          font-size: 14px;     /* cỡ chữ 14px */
          line-height: 150%;   /* chiều cao dòng = 150 * 14 / 100= 21px */
  }
  

• percentage: một giá trị phần trăm (như 120%, 200% ...)

  Chiều cao dòng chính là tính theo phần trăm của font-size.

  .my-height {
      line-height: 20px; /* chiều cao dòng là 20px, không phụ thuộc vào cỡ chữ của nó */
  }
  

• inherit

  Chiều cao dòng kế thừa từ phần tử cha.

Ví dụ: Thay đổi giá trị line-height trong code css sau đây để giãn dòng.