Làm thế nào để tính toán chiều cao của một phần tử nội tuyến

Question

Tôi có một yếu tố span với CSS sau đây:

span.test { 
    font-size: 20px; 
    line-height: 1; 
} 

Tại sao chiều cao tính toán của nhịp dường như được 22px? 2 pixel phụ này đến từ đâu?

Có thể làm cho nó 20px cao mà không sử dụng inline-block?

Đây là jsbin đơn giản tôi đã sử dụng để kiểm tra: http://jsbin.com/tigevecemoco/1/edit

Answer 1

The CSS 2.1 spec says:

10.6.1 Inline, các yếu tố phi thay thế

Các 'chiều cao' bất động sản không áp dụng. Chiều cao của khu vực nội dung phải dựa trên phông chữ, nhưng đặc tả này không xác định cách thức.

Vì nó xảy ra chiều cao, ngược lại với chiều cao dòng, của phần tử nội tuyến không thay thế có rất ít ảnh hưởng đến bất kỳ thứ gì khác nên các trình duyệt được tự do báo cáo bất kỳ số nào họ thích ở đây.

Tuy nhiên, một kỹ thuật đảo ngược nhỏ có thể mang tính hướng dẫn.

Nếu chúng ta xem xét các chỉ số phông chữ cho Times New Roman, chúng tôi thấy kích thước EM là 2048, WinAscent 1825 và WinDescent là 443. Tổng số tăng và giảm, chia cho kích thước EM, nhân với kích thước phông chữ (20px) và làm tròn số nguyên và chúng tôi nhận được 22px.

Lấy Arial làm phông chữ khác, chúng tôi có kích thước EM là 2048, WinAscent năm 1854 và WinDescent là 434. Thực hiện lại phép tính và chúng tôi lại nhận được 22px.

Còn phông chữ khác thì sao? Tahoma có kích thước EM là 2048, WinAscent năm 2049 và WinDescent là 423. Thực hiện lại phép tính và lần này chúng tôi nhận được 24px. Và xin chào, nếu bạn thử JsBin với phông chữ Tahoma, Firefox thực sự hiển thị chiều cao là 24px.

Các chỉ số phông chữ ở trên được lấy từ tải phông chữ vào Type Light 3.2.

Không kết luận, nhưng đề xuất hợp lý về cách hoạt động của nó.

Có thể làm cho nó cao 20px mà không sử dụng khối nội tuyến không?

Giả sử ở trên là chính xác, bạn sẽ có thể đạt được điều đó bằng cách sử dụng phông chữ tùy chỉnh và sửa đổi các chỉ số phông chữ của phông chữ đó cho phù hợp. Tôi không muốn dự đoán các hiệu ứng knock-on của việc đó.

Answer 2

tôi không thể tìm thấy câu trả lời cho lý do tại sao nó được áp dụng. Tôi thấy nhiều diễn đàn với cùng một câu hỏi ...

Nhưng, như một câu trả lời cho yêu cầu của bạn:

Có thể làm cho nó 20px cao mà không sử dụng inline-block?

Tôi đã quản lý để thực hiện điều đó chỉ bằng cách thả phần tử. Nó dường như mất bất cứ điều gì nó đã được đệm nó ... Sau đó, thiết lập các line-height để cụ thể 20px làm cho nó hoạt động.

span.test { 
 
    font-size: 20px; 
 
    line-height: 20px; 
 
    float: left; 
 
}

<span class="test">A</span>

EDIT

Trên thực tế, thêm float công trình vì nó làm cho inline yếu tố cư xử như block yếu tố.

Xem: https://developer.mozilla.org/en-US/docs/Web/CSS/float

Answer 3

'line-hieght: 1' được thừa hưởng từ cha mẹ. thử dòng chiều cao của riêng mình.

Answer 4

MDN line-height

why the span's line-height is useless

Hope this helps.

Answer 5

Tôi đã sử dụng JS Bin http://jsbin.com/siqabekoloja/1/edit để khắc phục sự cố của bạn. Tôi đã có thể làm cho nó phù hợp trong IE, Chrome và Firefox. Tôi tin rằng vấn đề là bạn cần yếu tố để chặn không phải là một yếu tố nội tuyến.

Hy vọng điều này sẽ hữu ích. Nếu bạn muốn chúng ở cạnh nhau, hãy thả chúng sang trái hoặc sang phải.