quy tắc CSS cơ bản của tôi cho font-size và line-height là khá đơn giản:Làm thế nào để đạt được đúng CSS line-height quán
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
line-height: 24px;
}
Khi tôi tạo ra một đoạn văn có chứa một <em> hoặc một <strong> (hoặc thậm chí một số <code> trong đó sử dụng khác nhau font-size so với <body>), tôi nhận thấy rằng các yếu tố này làm tăng chiều cao dòng lên một hoặc hai pixel.
Điều này khiến tôi tin rằng hầu hết các trình duyệt đều lấy phần tử nội tuyến lớn nhất để hiển thị line-height. Có đúng không?
Mục tiêu của tôi là làm cho line-height nhất quán, bất kể yếu tố nào là nội tuyến.
Cách duy nhất tôi đã tìm thấy để làm cho line-height phù hợp là xác định:
em, strong, code, etc {
line-height: 100%;
}
Đây có phải là cách đúng đắn để đi về điều này? Hay tôi có quá nhiều người cầu toàn?
Sửa 1:
này cũng dường như làm việc:
em, strong, code, etc {
line-height: 1;
}
Chỉnh sửa 2:
Sau khi chơi với điều này trong một vài ngày, nó không xuất hiện mà có một giải pháp đáng tin cậy để giữ một số line-height nhất quán. Nếu bất cứ ai có bất kỳ ý tưởng nào, tôi chắc chắn sẽ thích nghe chúng.
Sửa 3:
Để tham khảo trong tương lai của riêng tôi và từ nghiên cứu của riêng tôi, các thẻ cần được xem xét với line-height: 1 miễn là chúng được hiển thị inline cùng với văn bản cơ thể tiêu chuẩn khác:
abbr, acronym, b, big, cite, code, del, dfn, em, i, ins, kbd, q,
samp, small, strong, sub, sup, tt, var
Những yếu tố này đáng ngờ:
a, bdo, img, span
Thông tin tuyệt vời! Điều gì về 'p * {line-height: 0; } ', hoặc tốt hơn nhưng có lẽ 'p a, p code, p lớn {line-height: 0; } '? Bây giờ chúng ta đang đi đâu đó. ';)' – Jeff
Theo dõi nhận xét cuối cùng của tôi. Hãy cẩn thận với mã của tôi ở trên. Ví dụ: nếu bạn có, '
foo
', chiều cao dòng sẽ tính bằng 0, có thể không phải là thứ bạn muốn. – Jeff