Bài viết được dịch từ bài Deep dive CSS: phông metrics, line-height & vertical-align của tác giả Vincent De Oliveira.Bạn đã xem: Line-height là gì

Line-height cùng vertical-align là những thuộc tính CSS solo giản. Đơn giản mang lại nỗi hầu hết chúng ta đều bị thuyết phục rằng mình đã trọn vẹn hiểu biện pháp chúng chuyển động và cách thực hiện chúng. Nhưng chưa hẳn vậy. Thực sự bọn chúng phức tạp, chắc rằng là tinh vi nhất, vì chưng chúng đóng vai trò chính trong câu hỏi tạo thành một trong những tính năng không nhiều được biết đến của CSS: inline formatting context.Bạn sẽ xem: Line-height là gì

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

Tìm hiểu sâu về một phép tắc không-đơn-giản của CSS...

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

Hãy nói đến font-size trước

Hãy xem đoạn code HTML đơn giản và dễ dàng bên dưới, một thẻ chứa 3 thẻ , mỗi thẻ sử dụng 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 và một font-size với các font-family khác nhau sẽ tạo nên các bộ phận với chiều cao khác nhau:


*

Các font-family khác nhau, cùng font-size, sinh ra các chiều cao khác nhau

Tuy họ đoán trước được câu hỏi đó, nhưng lý do font-size: 100px không xuất hiện các thành phần với chiều cao 100px? Tôi đã đo và nhận được những giá trị: Helvetica: 115px, Gruppo: 97px và Catamaran: 164px


*

Các phần tử với font-size: 100px tất cả chiều cao thay đổi từ 97px mang đến 164px

Dù có vẻ như hơi kỳ lạ, dẫu vậy điều này trọn vẹn nằm trong dự đoán. Tại sao nằm ở bạn dạng thân những font chữ. Dưới đấy là cách những font chữ hoạt động:

Dựa trên 1-1 vị kha khá của nó, các chỉ số của font text (font metrics) đang được khẳng định (ascender, descender, capital height, x-height, v..v..). Chăm chú là một vài giá trị có thể tràn ra phía bên ngoài em-square.

Trên trình duyệt, các đơn vị tương đối có thể được giãn nở để vừa cùng với font-size mong muốn.

Hãy mở font Catamaran bởi FontForge để xem những chỉ số:

em-square là 1000ascender là 1100 và descender là 540. Sau khoản thời gian kiểm tra thử, gồm vẻ những trình chăm chú sử dụng những giá trị HHead Ascent/Descent trên MacOS cùng Win Ascent/Descent trên Windows (các giá trị này rất có thể khác nhau!). Bọn họ cũng chăm chú rằng Capital Height là 680 và 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à font Catamaran thực hiện 1100 + 540 đơn vị chức năng trên 1000 đơn vị em-square, kết quả là 164px khi thiết lập cấu hình giá trị font-size: 100px. độ cao được thống kê giám sát (computed height) này quan niệm content-area của một phần tử cùng tôi đã đề cập tới định nghĩa này trong suốt phần còn sót lại của bài viết. Chúng ta cũng có thể coi content-area là vùng cơ mà thuộc tính background được vận dụng (điều này cũng không trọn vẹn chính xác).

Chúng ta hoàn toàn có thể dự đoán rằng độ cao của những chữ chiếc in hoa là 68px (680 1-1 vị) và các chữ chiếc in hay (x-height) là 49px (485 1-1 vị). Kết quả là 1ex = 49px với 1em = 100px, không phải 164px (may mắn là em là giá chỉ trị dựa vào font-size, chưa hẳn chiều cao được xem toán).


*

Font Catamaran: UPM - Units Per Em - cùng lượng px tương ứng khi thực hiện font-size: 100px

Trước khi tò mò kỹ hơn, tốt xem xem hồ hết thứ trên có chân thành và ý nghĩa gì. Khi 1 phần tử được hiển thị trên màn hình, nó có thể được tạo bởi nhiều dòng, nhờ vào độ rộng lớn của nó. Mỗi dòng được tạo vày một hay nhiều bộ phận inline (thẻ HTML tốt các bộ phận inline vô danh như text) và mỗi loại này được gọi là 1 trong những line-box. độ cao của một line-box dựa trên chiều cao của các phần tử con của nó. Cho nên trình chuẩn y sẽ đo lường chiều cao của mỗi bộ phận inline, từ kia tính ra chiều cao của line-box (từ điểm cao nhất đến điểm thấp độc nhất vô nhị của các thành phần con). Hiệu quả là một line-box luôn luôn đủ cao để có thể chứa toàn bộ các phần tử con của chính nó (mặc định là vậy).

Mỗi phần tử HTML thực tế là một ck các line-box. Nếu như khách hàng biết độ cao của từng line-box, các bạn sẽ biết được chiều cao của phần tử đó.

Nếu bọn họ sửa code HTML ở trên thành thế này:

p> Good thiết kế will be better. Span class="a">Baspan> span class="b">Baspan> span class="c">Baspan> We get khổng lồ make a consequence.p>nó sẽ hiện ra 3 line-box:

line-box trước tiên và ở đầu cuối chứa một phần tử inline vô danh (text)line-box thứ hai chứa 2 phần tử inline vô danh với 3 thẻ


*

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

Chúng ta thấy rõ rằng line-box thứ 2 cao hơn các line-box khác, do content-area của các thành phần con của nó, và chính xác hơn là bộ phận sử dụng font Catamaran.

line-height: những vấn đề và chưa dừng lại ở đó nữa

Nghe có vẻ lạ, nhưng một trong những phần tử inline có 2d cao khác nhau: độ cao content-area và độ cao virtual-area (tôi đã tạo ra khái niệm virtual-area để đại diện cho độ cao mà bọn họ nhìn thấy được, các bạn sẽ không thấy trong sệt tả đâu).

chiều cao content-area được quan niệm bởi những chỉ số của phông (như vẫn nói sinh hoạt trên).chiều cao virtual-area là line-height, cùng nó là độ cao được cần sử dụng để đo lường chiều cao của line-box.

Các phần tử inline có 2d cao không giống nhau

Như vậy, vấn đề đó đã phá tan vỡ quan niệm thường thì rằng line-height là khoảng cách giữa những baseline. Trong CSS thì không giống như vậy.

Trong CSS, line-height chưa phải là khoảng cách giữa những baseline

Chiều cao khác biệt giữa virtual-area với content-area được hotline là leading. Một phần hai leading được thêm vào đó 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 dưới. Cho nên vì thế content-area luôn ở thân của virtual-area.

Dựa trên các giá trị được xem toán, line-height (virtual-area) rất có thể bằng, cao hơn hoặc thấp rộng content-area. Vào trường phù hợp virtual-area rẻ hơn, leading sẽ âm với một line-box trông sẽ thấp rộng các bộ phận con của nó.

Còn có các loại phần tử inline khác:

các phần tử inline sửa chữa (

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

Tuy nhiên, vụ việc của bọn họ là quý hiếm normal của line-height là bao nhiêu? với câu trả lời, như việc thống kê giám sát chiều cao content-area, được tìm kiếm thấy trong các chỉ số của font.

Vậy thì hãy trở về với FontForge. Em-square của Catamaran là 1000, nhưng họ thấy nhiều 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 tự (bảng "OS/2")Các chỉ số Ascent/Descent: ascender là 1100 với descender là 540. Được áp dụng để tính độ cao content-area (bảng "hhea" và bảng "OS/2")chỉ số Line Gap. Được áp dụng cho line-height: normal, bằng phương pháp cộng thêm quý giá này vào các chỉ số Ascent/Descent (bảng "hhea")

Trong trường hòa hợp của bọn chúng ta, phông Catamaran định nghĩa line gap với giá trị là 0, cần line-height: normal sẽ bằng với content-area, có nghĩa là 1640 đối chọi vị, xuất xắc 1.64.

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

Do đó, phân minh rằng việc đặt line-height: 1 là một giải pháp làm xấu. Tôi xin nhắc lại rằng các giá trị không đơn vị chức năng có tính tương đối với font-size, ko tương so với content-area, cùng trường thích hợp virtual-area thấp hơn content-area là nguồn gốc của tương đối nhiều vấn đề.

Xem thêm: Snowball Là Gì? Chiến Thuật Lăn Cầu Tuyết Là Gì Snowball Là Gì

Sử dụng line-height: 1 hoàn toàn có thể tạo ra một line-box thấp hơn content-area

Nhưng không những có mỗi line-height: 1. Trong các 1117 phông được download trên máy của tôi (phải, tôi cài toàn bộ các phông của Google website Fonts), 1059 font, khoảng chừng 95%, có line-height lớn hơn 1. Line-height của tất cả các phông đó dao động từ 0.618 cho tới 3.378. Chúng ta vừa phát âm đúng rồi đấy, 3.378!

Một chút chi tiết nữa về việc giám sát line-box:

Với các bộ phận inline vậy thế, inline-block cùng blocksified: padding, margin và border làm tăng height cần làm tăng chiều cao content-area cùng line-box.