LINE-HEIGHT LÀ GÌ

Bài viết được dịch từ bài xích Deep dive sầu CSS: phông metrics, line-height and vertical-align của người sáng tác Vincent De Oliveira.

Bạn đang xem: Line-height là gì

Line-height cùng vertical-align là những trực thuộc tính CSS đơn giản dễ dàng. Đơn giản cho nỗi hầu như bọn họ đông đảo bị ttiết phục rằng tôi đã trọn vẹn hiểu biện pháp chúng chuyển động với phương pháp thực hiện chúng. Nhưng không phải vậy. Thực sự bọn chúng tinh vi, chắc rằng là phức tạp tuyệt nhất, vì bọn chúng đóng vai trò chủ yếu trong câu hỏi tạo ra thành một trong số những hào kiệt ít được nghe biết của CSS: inline formatting context.

Ví dụ, line-height hoàn toàn có thể thừa nhận cực hiếm là một trong những độ nhiều năm hoặc một giá trị không đơn vị chức năng, với cái giá trị mang định là normal. Được rồi, vậy normal tức thị như thế nào? Chúng ta hay hiểu rõ rằng nó là (hoặc bắt buộc là) 1, hoặc rất có thể là một trong.2, thậm chí sệt tả của CSS còn ko diễn tả rõ ràng về vụ việc này. Chúng ta hiểu được quý hiếm ko đơn vị chức năng của line-height có tính tương so với font-size, nhưng lại vụ việc là font-size: 100px khác nhau đối với những font-family không giống nhau, vậy thì line-height luôn luôn kiểu như hay khác nhau? Nó gồm thực sự nhấn quý giá giữa 1 cùng 1.2? Và vertical-align, chân thành và ý nghĩa liên quan cho line-height của nó là gì?

Tìm gọi sâu về một qui định không-đơn-giản của CSS...

Hãy nói về font-size trước

Hãy coi đoạn code HTML dễ dàng bên dưới, một thẻ đựng 3 thẻ , từng thẻ thực hiện một font-family khác nhau:

p> span class="a">Baspan> span class="b">Baspan> span class="c">Baspan>p>p font-size: 100px .a font-family: Helvetica .b font-family: Gruppo .c font-family: Catamaran Sử dụng và một font-size với những font-family khác biệt sẽ tạo ra những phần tử với độ cao không giống nhau:

Các font-family khác biệt, cùng font-kích cỡ, xuất hiện những chiều cao khác nhau

Tuy chúng ta đoán thù trước được câu hỏi kia, tuy vậy tại sao font-size: 100px không ra đời các bộ phận với độ cao 100px? Tôi vẫn đo cùng nhận ra các giá trị: Helvetica: 115px, Gruppo: 97px cùng Catamaran: 164px

Các bộ phận cùng với font-size: 100px bao gồm độ cao chuyển đổi từ bỏ 97px mang lại 164px

Dù có vẻ như hơi kỳ dị, nhưng lại vấn đề đó hoàn toàn nằm trong dự đân oán. Lý do nằm tại bạn dạng thân các font text. Dưới đấy là giải pháp các phông chữ hoạt động:

Dựa bên trên đơn vị kha khá của chính nó, những chỉ số của phông chữ (fonts metrics) sẽ tiến hành xác định (ascender, descender, capital height, x-height, v..v..). Chụ ý là một số quý hiếm có thể tràn ra bên ngoài em-square.

Trên trình lưu ý, các đơn vị chức năng kha khá có thể được co và giãn để vừa cùng với font-form size mong ước.

Hãy mngơi nghỉ phông Catamaran bằng FontForge giúp xem những chỉ số:

em-square là 1000ascender là 1100 cùng descender là 540. Sau Lúc khám nghiệm thử, có vẻ như các trình để mắt tới thực hiện các quý giá HHead Ascent/Descent trên MacOS với Win Ascent/Descent trên Windows (những quý hiếm này hoàn toàn có thể khác nhau!). Chúng ta cũng chăm chú rằng Capital Height là 680 và X height là 485.

Các chỉ số của phông lúc xem trên FontForge

Điều đó tức là fonts Catamaran thực hiện 1100 + 540 đơn vị chức năng bên trên 1000 đơn vị em-square, tác dụng là 164px lúc tùy chỉnh thiết lập quý giá font-size: 100px. Chiều cao được tính toán (computed height) này quan niệm content-area của một phần tử với tôi sẽ đề cùa tới có mang này nhìn trong suốt phần còn sót lại của nội dung bài viết. Quý khách hàng rất có thể coi content-area là vùng nhưng ở trong tính background được vận dụng (điều đó cũng ko trọn vẹn bao gồm xác).

Chúng ta hoàn toàn có thể dự đoán rằng độ cao của những chữ cái in hoa là 68px (680 solo vị) và những chữ cái in hay (x-height) là 49px (485 đối chọi vị). Kết trái là 1ex = 49px với 1em = 100px, không phải 164px (như mong muốn là em là quý giá dựa trên font-form size, chưa phải độ cao được xem toán).

Font Catamaran: UPM - Units Per Em - cùng lượng pixel khớp ứng Lúc sử dụng font-size: 100px

Trước lúc mày mò kỹ rộng, tốt coi coi các đồ vật bên trên tất cả ý nghĩa sâu sắc gì. khi 1 phần tử được hiển thị trên màn hình hiển thị, nó có thể được tạo thành bởi vì nhiều cái, nhờ vào phạm vi của chính nó. Mỗi mẫu được chế tác vị một giỏi những phần tử inline (thẻ HTML giỏi các bộ phận inline vô danh nlỗi text) với mỗi dòng này được gọi là một trong những line-box. Chiều cao của một line-box dựa vào độ cao của các thành phần nhỏ của nó. Do đó trình để mắt sẽ tính toán thù chiều cao của từng bộ phận inline, từ bỏ đó tính ra độ cao của line-box (từ bỏ điểm tối đa đến điểm phải chăng độc nhất của những thành phần con). Kết quả là một trong line-box luôn đủ cao để hoàn toàn có thể cất tất cả những bộ phận con của chính nó (khoác định là vậy).

Mỗi bộ phận HTML thực ra là 1 ông xã các line-box. Nếu bạn biết chiều cao của mỗi line-box, bạn sẽ biết được độ cao của phần tử kia.

Nếu họ sửa code HTML sống bên trên thành nắm này:

p> Good thiết kế will be better. span class="a">Baspan> span class="b">Baspan> span class="c">Baspan> We get lớn make a consequence.p>nó đã xuất hiện 3 line-box:

line-box đầu tiên với sau cùng chứa 1 phần tử inline vô danh (text)line-box thứ 2 đựng 2 bộ phận inline vô danh cùng 3 thẻ

Một thẻ (đường viền đen) được chế tác thành từ bỏ các line-box (đường viền trắng) đựng những bộ phận inline (đường viền trơn) và những bộ phận inline vô danh (đường viền nét đứt)

Chúng ta thấy rõ rằng line-box thứ hai cao hơn các line-box không giống, bởi content-area của những bộ phận nhỏ của nó, cùng chính xác rộng là thành phần sử dụng phông Catamaran.

Phần nặng nề trong bài toán tạo thành line-box là họ không thực thụ nhìn thấy giỏi kiểm soát và điều hành được nó bởi CSS. Ngay cả việc vận dụng nằm trong tính background vào ::first-line cũng cấm đoán chúng ta một tín hiệu trực quan về chiều cao của line-box trước tiên.

Xem thêm: 5 Cách Chữa Đau Mắt Hàn Hiệu Quả Sau 15 Phút, Đau Mắt Hàn

line-height: các sự việc và hơn thế nữa nữa

Tới giờ, tôi vẫn ra mắt tới các bạn 2 khái niệm: content-area với line-box. Nếu các bạn ghi nhớ, tôi đã bảo rằng độ cao của một line-box được tính tân oán dựa vào độ cao của các thành phần bé của chính nó chứ không cần nói rằng nó được xem toán thù dựa vào độ cao của content-area của những phần tử nhỏ đó. Vấn đề này tạo ra một khác hoàn toàn bự.

Nghe có vẻ kỳ lạ, dẫu vậy một phần tử inline gồm 2D cao không giống nhau: độ cao content-area với độ cao virtual-area (tôi đang tạo thành quan niệm virtual-area để đại diện mang đến độ cao nhưng mà bọn họ thấy được được, bạn sẽ không thấy trong sệt tả đâu).

chiều cao content-area được khái niệm do các chỉ số của fonts (nhỏng đã nói sống trên).chiều cao virtual-area là line-height, với nó là độ cao được dùng để làm tính toán độ cao của line-box.

Các phần tử inline bao gồm 2 chiều cao không giống nhau

Bởi vậy, vấn đề đó vẫn phá vỡ vạc ý niệm thông thường rằng line-height là khoảng cách giữa những baseline. Trong CSS thì không phải như vậy.

Trong CSS, line-height chưa hẳn là khoảng cách giữa các baseline

Chiều cao khác nhau giữa virtual-area và content-area được Điện thoại tư vấn là leading. Một nửa leading được cộng thêm vào phía bên trên của content-area, nửa còn lại được cộng thêm vào phía bên dưới. Do đó content-area luôn luôn trung tâm của virtual-area.

Dựa bên trên các giá trị được xem toán thù, line-height (virtual-area) rất có thể bằng, cao hơn hoặc phải chăng rộng content-area. Trong trường hợp virtual-area phải chăng hơn, leading đang âm và một line-box trông đang thấp rộng các thành phần con của chính nó.

Còn bao gồm những một số loại thành phần inline khác:

các phần tử inline thay thế (

Các phần tử inline thay thế sửa chữa, inline-block/inline-* cùng blocksified bao gồm content-area bằng cùng với chiều cao, hay line-height, của chúng

Tuy nhiên, vấn đề của họ là giá trị normal của line-height là bao nhiêu? Và câu trả lời, nlỗi câu hỏi tính toán thù độ cao content-area, được tìm kiếm thấy trong số chỉ số của font.

Vậy thì nên trở về với FontForge. em-square của Catamaran là 1000, mà lại họ thấy những giá trị ascender/descender không giống nhau:

Ascent/Descent thông thường: ascender là 770 và descender là 230. Được áp dụng để vẽ cam kết trường đoản cú (bảng "OS/2")Các chỉ số Ascent/Descent: ascender là 1100 với descender là 540. Được sử dụng nhằm tính chiều cao content-area (bảng "hhea" và bảng "OS/2")chỉ số Line Gap. Được áp dụng mang đến line-height: normal, bằng cách thêm vào đó quý hiếm này vào các chỉ số Ascent/Descent (bảng "hhea")

Trong trường vừa lòng của họ, fonts Catamaran khái niệm line gap với cái giá trị là 0, cần line-height: normal vẫn bằng với content-area, Có nghĩa là 1640 đơn vị, hay như là một.64.

Để đối chiếu, fonts Arial tư tưởng em-square với mức giá trị 2048 đơn vị, ascender = 1854, descender = 434 và line gap = 67. Nghĩa là cùng với font-size: 100px thì content-area sẽ là 112px (1117 1-1 vị) (Người dịch: (1854 + 434) * 1000 / 2048 = 1117,1875) cùng line-height: normal là 115px (1150 đơn vị chức năng hay như là 1.15). Tất cả những chỉ số này là của riêng fonts và được tùy chỉnh do bạn kiến thiết phông.

Do kia, rõ ràng rằng bài toán đặt line-height: một là một bí quyết có tác dụng xấu. Tôi xin nói lại rằng những giá trị ko đơn vị chức năng gồm tính tương đối với font-kích cỡ, ko tương đối với content-area, và trường vừa lòng virtual-area phải chăng rộng content-area là nguồn gốc của đa số sự việc.

Sử dụng line-height: 1 có thể tạo ra một line-box rẻ rộng content-area

Nhưng không chỉ có tất cả mỗi line-height: 1. Trong số 1117 phông được cài trên thiết bị của tớ (buộc phải, tôi mua tất cả những fonts của Google Web Fonts), 1059 phông, khoảng chừng 95%, có line-height to hơn 1. line-height của tất cả những phông kia xê dịch trường đoản cú 0.618 tới 3.378. quý khách vừa phát âm đúng rồi đó, 3.378!

Một chút chi tiết nữa về việc tính tân oán line-box:

với những phần tử inline, padding cùng border có tác dụng tăng vùng background, cơ mà ko làm tăng độ cao content-area (cũng giống như độ cao của line-box). Do đó content-area không hẳn dịp nào cũng là lắp thêm các bạn bắt gặp trên screen. margin-top với margin-bottom không có chức năng.

Xem thêm: Công Dụng Tuyệt Vời Của Trà Hoa Nhài Có Tác Dụng Gì, Cách Dùng & Kiêng Kỵ

Với những phần tử inline thay thế, inline-block cùng blocksified: padding, margin với border làm cho tăng height đề xuất làm tăng độ cao content-area và line-box.