Bài viết được dịch từ bỏ bài Deep dive sầu CSS: fonts metrics, line-height và vertical-align của người sáng tác Vincent De Oliveira.Quý Khách đang xem: Line-height là gì

Line-height và vertical-align là các trực thuộc tính CSS đơn giản dễ dàng. Đơn giản mang lại nỗi phần nhiều chúng ta hầu hết bị tmáu phục rằng mình đã hoàn toàn gọi cách bọn chúng vận động và biện pháp sử dụng bọn chúng. Nhưng không phải vậy. Thực sự chúng phức hợp, có lẽ rằng là phức hợp độc nhất, vị chúng đóng vai trò chủ yếu vào câu hỏi tạo nên thành một giữa những tính năng không nhiều được biết đến của CSS: inline formatting context.

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

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

Tìm đọc sâu về một nguyên tắc không-đơn-giản của CSS...

Hãy nói tới font-kích cỡ trước

Hãy coi đoạn code HTML đơn giản dễ dàng bên dưới, một thẻ chứa 3 thẻ , từng thẻ thực hiện một font-family không giống 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 cùng một font-kích thước với các font-family không giống nhau sẽ tạo ra các thành phần với chiều cao không giống nhau:


*

Các font-family không giống nhau, thuộc font-size, sinh ra các chiều cao khác nhau

Tuy họ đoán trước được vấn đề đó, dẫu vậy vì sao font-size: 100px ko hình thành các phần tử cùng với chiều cao 100px? Tôi đang đo với cảm nhận những giá bán trị: Helvetica: 115px, Gruppo: 97px cùng Catamaran: 164px


*

Các thành phần với font-size: 100px bao gồm độ cao chuyển đổi trường đoản cú 97px cho 164px

Dù có vẻ như hơi kỳ lạ, cơ mà điều này hoàn toàn phía bên trong dự đoán. Lý vì nằm tại phiên bản thân các font chữ. Dưới đó là cách các phông chữ hoạt động:

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

Trên trình xem xét, các đơn vị chức năng kha khá có thể được co giãn để vừa cùng với font-kích thước mong ước.

Hãy mlàm việc phông Catamaran bởi FontForge giúp xem những chỉ số:

em-square là 1000ascender là 1100 cùng descender là 540. Sau khi soát sổ thử, có vẻ các trình săn sóc áp dụng các cực hiếm HHead Ascent/Descent trên MacOS và Win Ascent/Descent bên trên Windows (các quý hiếm này hoàn toàn có thể không giống nhau!). Chúng ta cũng chú ý rằng Capital Height là 680 với X height là 485.


*

Các chỉ số của font khi chứng kiến tận mắt trên FontForge

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

Chúng ta có thể dự đoán thù rằng chiều cao của những chữ cái in hoa là 68px (680 1-1 vị) cùng những vần âm in thường xuyên (x-height) là 49px (485 đơn vị). Kết trái là 1ex = 49px cùng 1em = 100px, chưa hẳn 164px (suôn sẻ là em là quý hiếm dựa trên font-kích thước, không hẳn chiều cao được tính toán).


*

Font Catamaran: UPM - Units Per Em - cùng lượng px tương ứng khi áp dụng font-size: 100px

Trước Khi mày mò kỹ rộng, giỏi xem coi gần như thứ bên trên gồm ý nghĩa gì. khi một trong những phần tử được hiện trên screen, nó có thể được chế tạo vì chưng các loại, phụ thuộc phạm vi của chính nó. Mỗi dòng được chế tác vì chưng một tuyệt nhiều thành phần inline (thẻ HTML tuyệt các phần tử inline vô danh nhỏng text) cùng mỗi loại này được Hotline là một trong những line-box. Chiều cao của một line-box dựa vào chiều cao của những bộ phận bé của nó. Do đó trình chăm bẵm và tính toán chiều cao của từng thành phần inline, từ bỏ đó tính ra chiều cao của line-box (từ điểm cao nhất đến điểm rẻ tốt nhất của các thành phần con). Kết trái là 1 line-box luôn đầy đủ cao để rất có thể cất tất cả những bộ phận bé của nó (khoác định là vậy).

Mỗi bộ phận HTML thực chất là 1 trong ck những line-box. Nếu chúng ta biết chiều cao của từng line-box, các bạn sẽ hiểu rằng chiều cao của phần tử kia.

Nếu bọn họ sửa code HTML sống bên trên thành gắng 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ó đã ra đời 3 line-box:

line-box trước tiên và sau cuối đựng một trong những phần tử inline vô danh (text)line-box thứ 2 cất 2 thành phần inline vô danh với 3 thẻ


*

Một thẻ (mặt đường viền đen) được sản xuất thành từ bỏ những line-box (con đường viền trắng) đựng những bộ phận inline (mặt đường viền trơn) với các phần tử inline vô danh (đường viền nét đứt)

Chúng ta thấy rõ rằng line-box thứ hai cao hơn nữa những line-box khác, vì chưng content-area của các phần tử nhỏ của chính nó, với đúng chuẩn rộng là thành phần áp dụng font Catamaran.

line-height: những vụ việc với không những thế nữa

Tới giờ đồng hồ, tôi đã ra mắt cho tới chúng ta 2 khái niệm: content-area cùng line-box. Nếu các bạn nhớ, tôi đã nói rằng độ cao của một line-box được xem toán dựa vào độ cao của các bộ phận bé của nó chứ không cần nói rằng nó được xem toán thù dựa trên chiều cao của content-area của các thành phần con kia. Vấn đề này tạo ra một khác hoàn toàn bự.

Xem thêm: Lập Trình C: Biến Cục Bộ Là Gì ? Biến Cục Bộ Là Gì

Nghe có vẻ như lạ, dẫu vậy 1 phần tử inline tất cả 2 chiều cao khác nhau: chiều cao content-area và độ cao virtual-area (tôi vẫn tạo nên định nghĩa virtual-area để đại diện thay mặt mang lại độ cao mà lại họ bắt gặp được, bạn sẽ không thấy trong đặc tả đâu).

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


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

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


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

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

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

Còn có các nhiều loại thành phần inline khác:

các thành phần inline sửa chữa (

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

Tuy nhiên, sự việc của bọn họ là quý hiếm normal của line-height là bao nhiêu? Và câu vấn đáp, như Việc tính toán độ cao content-area, được tìm kiếm thấy trong số chỉ số của fonts.

Vậy thì nên quay trở lại với FontForge. em-square của Catamaran là 1000, tuy nhiên chúng ta thấy các quý giá ascender/descender không giống nhau:

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

Trong trường vừa lòng của chúng ta, fonts Catamaran có mang line gap với cái giá trị là 0, đề xuất line-height: normal sẽ bởi với content-area, tức là 1640 đơn vị chức năng, hay như là một.64.

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

Do đó, hiển nhiên rằng việc đặt line-height: một là một bí quyết làm cho xấu. Tôi xin đề cập lại rằng các quý hiếm ko đơn vị tất cả tính tương so với font-form size, ko tương so với content-area, với trường hòa hợp virtual-area thấp hơn content-area là xuất phát của khá nhiều vụ việc.

Xem thêm: Top Giới Thiệu: Spectre Dc Là Ai, Top 10 Nhân Vật Mạnh Nhất Trong Vũ Trụ Dc


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

Nhưng không chỉ có gồm từng line-height: 1. Trong số 1117 font được cài bên trên lắp thêm của tôi (yêu cầu, tôi thiết lập tất cả các fonts của Google Web Fonts), 1059 font, khoảng 95%, có line-height lớn hơn 1. line-height của toàn bộ những phông kia giao động từ bỏ 0.618 cho tới 3.378. quý khách hàng vừa phát âm đúng rồi đấy, 3.378!

Một chút cụ thể nữa về Việc tính tân oán line-box:

Với những thành phần inline thay thế, inline-block cùng blocksified: padding, margin với border có tác dụng tăng height đề nghị làm cho tăng chiều cao content-area cùng line-box.


Chuyên mục: Ý NGHĨA
Bài viết liên quan

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *