Hướng dẫn line-height css là gì

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: đị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. 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: 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. 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ế. «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,.. 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. 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. 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. 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: 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.

Line

Letter Spacing là gì CSS?

Clear trong CSS là gì?

Br /> trong HTML là gì?