Sự khác biệt giữa chiều cao dòng: 1,5 và chiều cao dòng: 150% trong css là gì?

Question

Có ai biết về nó không?

Answer 1

Phiên bản ngắn: line-height: 150% là tĩnh, line-height: 1.5 là động. Hiệu ứng này rõ ràng hơn trên các yếu tố kế thừa. Một ví dụ:

HTML

<div style="font-size: 12px"> 
    <span style="font-size: 24px">test</span> 
</div> 

CSS này

div { line-height: 150%; } /* Computed line-height: 18px (150% * 12px) */ 
span { }     /* Computed line-height: 18px (inherited directly) */ 

Trái ngược với điều này:

div { line-height: 1.5 } /* Computed line-height: 18px (1.5 * 12px) */ 
span { }     /* Computed line-height: 36px (1.5 * 24px) */ 

Bạn có thể đọc thêm tại CSS2 specs page

Answer 2

Cả hai đều tương đương nhau.

line-height: 1.5 (không có đơn vị) sẽ thay đổi kích thước phông chữ của phần tử theo số 1.5 để tính chiều cao dòng.

line-height: 150% sẽ mất 150% của tính kích thước phông chữ của phần tử để tính toán chiều cao dòng, tương đương với nhân nó bởi 1.5.

Ba quy tắc trong ví dụ dưới đây có cùng chiều cao dòng kết quả:

div { line-height: 1.2; font-size: 10pt }  /* number */ 
div { line-height: 1.2em; font-size: 10pt } /* length */ 
div { line-height: 120%; font-size: 10pt } /* percentage */ 

Bây giờ chúng ta hãy có một cái nhìn tại the question you asked.

tôi sao chép hai trường hợp:

1. http://gregory.pakosz.fr/stackoverflow/2040694-number.html
2. http://gregory.pakosz.fr/stackoverflow/2040694-percentage.html

Trong 1), div của của cha mẹ line-height được thiết lập để 1.5 nhân font size thực tế của div. Thuộc tính này được kế thừa và được tính toán lại cho trẻ span vì bạn đã thay đổi kích thước phông chữ thực tế của nó.

Trong 2), div của phụ huynh line-height được đặt thành 150% kích thước phông chữ được tính của div. Sau đó, kích thước phông chữ được tính toán của span được kế thừa từ div do đó 150% kích thước phông chữ được tính kế thừa này dẫn đến cùng một giá trị.

Như @K Thủ tóm tắt, lấy đi nhiều khả năng: line-height: 150% là tĩnh, line-height: 1.5 là động

Tài liệu tham khảo:

• 10.8 Line height calculations: the 'line-height' and 'vertical-align' properties (CSS2)

Answer 3

line-height: normal | 

<number>| 

<length>| 

<percentage> 

Từ line-height

<number> 

Giá trị được sử dụng này không đơn nhân với kích thước phông chữ của phần tử. Giá trị được tính giống với giá trị được chỉ định. Trong hầu hết các trường hợp, đây là cách ưa thích để đặt chiều cao dòng không có kết quả bất ngờ trong trường hợp thừa kế.

<percentage> 

So với kích thước phông chữ của chính phần tử đó. Giá trị được tính toán là phần trăm này nhân với kích thước phông chữ được tính toán của phần tử.