CSS cơ bản

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.


Đăng ký nhận bài viết mới