Tại sao tính năng 'chiều cao dòng' của thuộc tính CSS không cho phép tôi tạo các không gian dòng chặt chẽ trong Chrome?

Question

Tôi có một thẻ đoạn mà tôi đã xác định ở nơi khác với chiều cao dòng là 15px và tôi có một thẻ đoạn khác ở phía dưới trang nơi tôi muốn tạo chiều cao dòng khoảng 10px. Điều thú vị là, nó sẽ không cho phép tôi giảm xuống 10px hoặc bất cứ điều gì nhỏ hơn thế, nhưng khi tôi đặt nó thành 25px hoặc cao hơn, thuộc tính chiều cao dòng có vẻ đang hoạt động.

Tôi đã kiểm tra CSS có liên quan (tất cả được mã hóa bằng tay) thông qua công cụ dành cho nhà phát triển web của trình duyệt Chrome (phiên bản Chrome Firebug của Chrome) và không thể tìm thấy bất kỳ nội dung nào có liên quan. Có một lỗi CSS phổ biến mà ngăn cản tôi từ thu hẹp chiều cao dòng vượt quá một số tiền tối thiểu nhất định?

Answer 1

chiều cao dòng có liên quan đến kích thước phông chữ, bạn không thể thấp hơn bất kỳ giá trị nào trừ khi bạn khai báo lề âm.

Answer 2

Tôi đã nhận thấy trong cả Firefox lẫn Chrome rằng nếu bạn đặt loại tài liệu HTML5 có chiều cao dòng tối thiểu cho các phần tử nội tuyến. Đối với các yếu tố khối, bạn có thể đặt chiều cao dòng cho bất kỳ thứ gì bạn muốn, thậm chí làm cho các đường chồng lên nhau.

Nếu bạn không đặt loại tài liệu HTML5, không có chiều cao dòng tối thiểu cho phần tử khối hoặc nội tuyến.

Answer 3

Tôi chạy vào cùng một vấn đề, làm việc tốt với:

.element { display: block; line-height: 1.2; } 

Answer 4

Sau khi thử nghiệm này trong IE 8-11, Firefox 38.0.1 và Chrome 43, hành vi này là như nhau: yếu tố nội tuyến có một chiều cao dòng tối thiểu mà chúng sẽ không dưới đây. Có vẻ chiều cao tối thiểu này xuất phát từ số CSS spec:

Trên phần tử vùng chứa có nội dung bao gồm các phần tử nội tuyến, 'chiều cao dòng' chỉ định chiều cao tối thiểu của các hộp dòng trong phần tử. Chiều cao tối thiểu bao gồm chiều cao tối thiểu trên đường cơ sở và độ sâu tối thiểu bên dưới đường cơ sở, chính xác như khi mỗi dòng hộp bắt đầu bằng hộp nội tuyến có chiều rộng bằng 0 với thuộc tính chiều cao của phông chữ và thuộc tính. Chúng tôi gọi hộp tưởng tượng đó là "strut".

Nếu bạn muốn duy trì một số lợi ích của các yếu tố nội tuyến, bạn có thể sử dụng display: inline-block. Bạn cũng có thể sử dụng display: block. Cả hai sẽ cho phép bạn làm cho chiều cao dòng bất cứ điều gì bạn muốn trong tất cả các trình duyệt tôi đã thử nghiệm.

Hai câu hỏi liên quan để đọc hơn:

why the span's line-height is useless

The browser seems to have a minimum line-height on this block that contains text. Why?