• Trang chủ
• Tham khảo
• CSS
• Thuộc tính line-height

Định nghĩa và sử dụng

Thuộc tính line-height thiết lập chiều cao giữa các dòng.

Cấu trúc

tag {
    line-height: giá trị;
}

Với giá trị như sau:

Thuộc tính	giá trị	Ví dụ	Mô tả
line-height	normal	line-height: normal;	Không tăng khoảng cách giữa các ký tự cho chữ.
Số	line-height: 1.5;	Tăng hoặc giảm khoảng cách giữa các dòng, có thể là số tự nhiên hoặc số thập phân.
Khoảng cách	line-height: 2px;	Tăng hoặc giảm khoảng cách giữa các dòng, đơn vị có thể là px, em, %, ...
inherit	line-height: inherit;	Xác định thừa hưởng thuộc tính từ thành phần cha (thành phần bao ngoài).

Ví dụ

HTML viết:

HỌC WEB CHUẨN

HTML - HyperText Markup Language

XHTML - Extensible HyperText Markup Language

CSS - Cascading Style Sheets

JS - JavaScript

Hiển thị trình duyệt khi chưa có CSS:

HỌC WEB CHUẨN
HTML - HyperText Markup Language
XHTML - Extensible HyperText Markup Language
CSS - Cascading Style Sheets
JS - JavaScript

CSS viết:

Hiển thị trình duyệt khi có CSS:

HỌC WEB CHUẨN
HTML - HyperText Markup Language
XHTML - Extensible HyperText Markup Language
CSS - Cascading Style Sheets
JS - JavaScript

Trình duyệt hỗ trợ

Thuộc tính line-height được hỗ trợ trong đa số các trình duyệt.

Giá trị "inherit" không hỗ trợ trình duyệt IE7 trở xuống, IE8 đòi hỏi phải có !Doctype

---

---

Thuộc tính line-height trong CSS giúp bạn thay đổi chiều cao của hộp chứa dòng văn bản hiển thị. Bạn chú ý rằng chiều cao của văn bản hiển thị sẽ không thay đổi, chỉ thay đổi chiều cao của Box mà chứa dòng văn bản đó.

Thuộc tính line-height có thể nhận giá trị:

• normal: giá trị mặc định. Trình duyệt sẽ tự tính toán chiều cao hợp lý cho Box này.

• number: giá trị số. Chiều cao thực sự của Box sẽ là kích cỡ font của phần tử nhân với giá trị số này.

• length: đơn vị độ dài. Chiều cao thực sự của Box là sẽ độ dài này.

• percentage: giá trị dạng tương đối (%). Chiều cao thực sự của Box sẽ được ước lượng tương quan với kích cỡ font của phần tử.

Thuộc tính line-height có thể áp dụng cho:

Tất cả các phần tử HTML.

Cú pháp thuộc tính line-height trong DOM

object.style.lineHeight = "15px;"

Ví dụ thuộc tính line-height trong CSS

Bạn theo dõi ví dụ sau để thấy cách sử dụng của thuộc tính line-height trong CSS:

   
   
   
      
style="line-height:180%">
      Dong text 1 nay co chieu cao dong lon hon dong text thu 2.
      
      
 Dong text 2 nay co chieu cao dong nho hon dong text 1. 
      
 Dong text 3 nay co chieu cao dong nho hon dong text 1. 
   
 

Quảng cáo

Kết quả là:

Đã có app VietJack trên điện thoại, giải bài tập SGK, SBT Soạn văn, Văn mẫu, Thi online, Bài giảng....miễn phí. Tải ngay ứng dụng trên Android và iOS.

Theo dõi chúng tôi miễn phí trên mạng xã hội facebook và youtube:

Follow fanpage của team https://www.facebook.com/vietjackteam/ hoặc facebook cá nhân Nguyễn Thanh Tuyền https://www.facebook.com/tuyen.vietjack để tiếp tục theo dõi các loạt bài mới nhất về Java,C,C++,Javascript,HTML,Python,Database,Mobile.... mới nhất của chúng tôi.

---

---

---

Bài viết liên quan

• 160 bài học ngữ pháp tiếng Anh hay nhất

• 155 bài học Java tiếng Việt hay nhất

• 100 bài học Android tiếng Việt hay nhất

• 247 bài học CSS tiếng Việt hay nhất

• 197 thẻ HTML cơ bản

• 297 bài học PHP

• 101 bài học C++ hay nhất

• 97 bài tập C++ có giải hay nhất

• 208 bài học Javascript có giải hay nhất

Nhóm phát triển của chúng tôi vừa ra mắt website langlearning.net học tiếng Anh, Nga, Đức, Pháp, Việt, Trung, Hàn, Nhật, ... miễn phí cho tất cả mọi người.
Là một website được viết trên công nghệ web Flutter vì vậy hỗ trợ rất tốt cho người học, kể cả những người học khó tính nhất.
Hiện tại website đang tiếp tục được cập nhập nội dung cho phong phú và đầy đủ hơn. Mong các bạn nghé thăm và ủng hộ website mới của chúng tôi.

Hãy theo dõi chúng tôi trên Fanpage để nhận được thông báo mỗi khi có bài viết mới. Facebook

1- CSS line-height

CSS line-height định nghĩa một khoảng cách giữa 2 baseline giữa 2 dòng văn bản liên tiếp của một phần tử. Trong đó baseline là đường dưới cùng của hầu hết các chữ cái trên cùng một dòng. Giống như hình minh họa dưới đây:

Line-height vs font-size

Hình ảnh minh họa mối quan hệ giữa line-height và font-size.

/* Keyword value (Default) */
line-height: normal;

/* Unitless values:
   use this number multiplied by the element's font size */
line-height: 3.5;

/*  values */
line-height: 3em;
line-height: 20px;

/*  values */
line-height: 34%;

/* Global values */
line-height: inherit;
line-height: initial;
line-height: unset;

Nếu một phần tử không được chỉ định line-height nó sẽ thừa kế từ phần tử cha. Các giá trị có thể của CSS line-height:

normal

Là giá trị mặc định của line-height, giá trị này phụ thuộc vào trình duyệt. Về cơ bản nó lớn hơn 20% so với font-size. Chẳng hạn nếu font-size là 14px thì line-height khoảng 16.8px.

«number» (unitless)

Nếu bạn cung cấp một giá trị là một con số «number» không bao gồm đơn vị tính cho line-height, giá trị của line-height sẽ bằng con số này nhân với font-size. Cách tiếp cận này được khuyến khích sử dụng, nó giúp bạn tránh các kết quả không mong muốn từ sự thừa kế.

«length»

Cung cấp một giá trị với một đơn vị tính cụ thể, chẳng hạn 30px, 25pt,..

Chú ý: Sử dụng đơn vị tính EM với CSS line-height có thể nhận được một kết quả không như mong đợi. Bạn có thể xem ở ví dụ phía dưới.

«percentage»

Chỉ định một giá trị phần trăm so với font-size của phần tử hiện tại.

Chú ý: Sử dụng giá trị phần trăm với CSS line-height cũng có thể gây ra một kết quả không như mong đợi. Xem ví dụ ở dưới.

Ví dụ:

lie-height-example.html

    
    
     
    


    
CSS line-height
    

       
Line-height:
        normal 

        3em 

        3.5 

        35px 

        150%
    
    

        Line 1 

        Line 2 

        Line 3 

        Line 4
    

2- Vấn đề với line-height và EM

Khi sử dụng CSS line-height với đơn vị tính EM, bạn có thể nhận được một kết quả không như mong đợi, nguyên nhân là CSS line-height có tính thừa kế. nhưng cách thừa kế khác nhau giữa line-height có đơn vị tính và line-height không có đơn vị tính (Unitless line-height). Hãy xem ví dụ dưới đây:

Các phần tử

trong ví dụ này đã thừa kế line-height từ phần tử cha của chúng, giá trị này có thể nhỏ hơn font-size làm cho văn bản hiển thị rất xấu.

unexpected-line-height-em.css

.green {
   line-height: 1.1;
   border: solid limegreen;
}
.red {
   line-height: 1.1em;
   border: solid red;
}
h2 {
   font-size: 30px;
}
.box {
     width: 160px;
     display: inline-block;
     vertical-align: top;
     font-size: 15px;
}

unexpected-line-height-em.html

    
    
    


    
Unexpected result of CSS line-height and EM unit.
    

     
Avoid unexpected results by using unitless line-height.
      length and percentage line-heights have poor inheritance behavior ...
    
    

       
Avoid unexpected results by using unitless line-height.
       length and percentage line-heights have poor inheritance behavior ...
    
 

3- Vấn đề với line-height và %

Khi sử dụng CSS line-height với đơn vị tính %, bạn có thể nhận được một kết quả không như mong đợi, nguyên nhân là CSS line-height có tính thừa kế, nhưng cách thừa kế khác nhau giữa line-height có đơn vị tính và line-height không có đơn vị tính (Unitless line-height). Hãy xem ví dụ dưới đây:

Các phần tử

trong ví dụ này đã thừa kế line-height từ phần tử cha của chúng, giá trị này có thể nhỏ hơn font-size làm cho văn bản hiển thị rất xấu.

unexpected-line-height-percent.css

.green {
   line-height: 1.1;
   border: solid limegreen;
}
.red {
   line-height: 110%;
   border: solid red;
}
h2 {
   font-size: 30px;
}
.box {
     width: 160px;
     display: inline-block;
     vertical-align: top;
     font-size: 15px;
}

unexpected-line-height-percent.html

    
    
    


    
Unexpected result of CSS line-height and %.
    

     
Avoid unexpected results by using unitless line-height.
      length and percentage line-heights have poor inheritance behavior ...
    
    

       
Avoid unexpected results by using unitless line-height.
       length and percentage line-heights have poor inheritance behavior ...