Line-height là gì

  -  

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

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

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

lấy ví dụ như, line-height có thể dìm quý giá là một trong độ dài hoặc một quý hiếm không đơn vị chức năng, với cái 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 đúng bản chất nó là (hoặc phải là) 1, hoặc có thể là 1 trong.2, thậm chí là quánh tả của CSS còn không diễn tả rõ ràng về vụ việc này. Chúng ta biết rằng cực hiếm ko đơn vị chức năng của line-height có tính tương đối với font-kích thước, cơ mà sự việc 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 như thể xuất xắc khác nhau? Nó gồm thực sự nhấn quý hiếm thân 1 cùng 1.2? Và vertical-align, ý nghĩa tương quan cho line-height của chính nó là gì?

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

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

Hãy xem đoạn code HTML dễ dàng bên dưới, một thẻ đựng 3 thẻ , mỗi 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 và một font-kích cỡ cùng với các font-family khác nhau sẽ tạo nên ra các thành phần với độ cao khác nhau:


*

Các font-family khác biệt, thuộc font-kích cỡ, hiện ra các chiều cao không giống nhau

Tuy bọn họ đoán thù trước được câu hỏi đó, tuy thế tại sao font-size: 100px không hiện ra những thành phần cùng với độ cao 100px? Tôi đã đo và nhận thấy các giá bán trị: Helvetica: 115px, Gruppo: 97px cùng Catamaran: 164px


*

Các thành phần cùng với font-size: 100px gồm chiều cao đổi khác tự 97px mang đến 164px

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

Dựa trên đơn vị tương đối của chính nó, các chỉ số của font chữ (fonts metrics) sẽ được xác minh (ascender, descender, capital height, x-height, v..v..). Crúc ý là một số quý hiếm hoàn toàn có thể tràn ra bên ngoài em-square.

Trên trình trông nom, các đơn vị kha khá hoàn toàn có thể được giãn nở để vừa cùng với font-form size ước muốn.

Hãy mnghỉ ngơi fonts Catamaran bởi FontForge để xem các chỉ số:

em-square là 1000ascender là 1100 cùng descender là 540. Sau Lúc soát sổ test, có vẻ như những trình chăm nom thực hiện những giá trị HHead Ascent/Descent trên MacOS với Win Ascent/Descent bên trên Windows (những giá trị này rất có thể khác nhau!). Chúng ta cũng chăm chú rằng Capital Height là 680 với X height là 485.


*

Các chỉ số của fonts 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ị chức năng em-square, kết quả là 164px khi thiết lập quý giá font-size: 100px. Chiều cao được xem toán thù (computed height) này quan niệm content-area của 1 phần tử với tôi đang đề cập đến có mang này trong veo phần còn lại của bài viết. quý khách hàng hoàn toàn có thể coi content-area là vùng mà trực thuộc tính background được vận dụng (vấn đề này cũng ko hoàn toàn bao gồm xác).

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


*

Font Catamaran: UPM - Units Per Em - và lượng pixel khớp ứng khi sử dụng font-size: 100px

Trước Lúc tò mò kỹ hơn, tuyệt xem xem hầu như sản phẩm bên trên có ý nghĩa sâu sắc gì. lúc một phần tử được hiển thị trên màn hình, nó rất có thể được tạo thành vì những loại, phụ thuộc vào phạm vi của chính nó. Mỗi mẫu được chế tạo ra do một tốt những bộ phận inline (thẻ HTML hay các phần tử inline vô danh nhỏng text) và từng 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 trên độ cao của các phần tử con của chính nó. Do đó trình coi sóc công thêm toán thù độ cao của mỗi thành phần inline, từ đó tính ra chiều cao của line-box (trường đoản cú điểm tối đa tới điểm thấp tốt nhất của những thành phần con). Kết trái là 1 trong những line-box luôn luôn đủ cao để có thể chứa tất cả những phần tử con của nó (mang định là vậy).

Mỗi thành phần HTML thực tế là một trong những ck các line-box. Nếu các bạn biết độ cao của mỗi line-box, bạn sẽ biết được độ cao của bộ phận kia.

Nếu chúng ta sửa code HTML nghỉ ngơi 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ó đã sinh ra 3 line-box:

line-box thứ nhất cùng sau cùng chứa một phần tử inline vô danh (text)line-box thứ 2 cất 2 thành phần inline vô danh cùng 3 thẻ


*

Một thẻ (con đường viền đen) được tạo ra thành tự những line-box (đường viền trắng) đựng những bộ phận inline (mặt đường viền trơn) cùng các phần tử inline vô danh (mặt đườ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ác, vì chưng content-area của các phần tử bé của nó, cùng đúng chuẩn hơn là bộ phận thực hiện fonts Catamaran.

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

Tới tiếng, tôi đã reviews cho tới các bạn 2 khái niệm: content-area cùng line-box. Nếu bạn lưu giữ, tôi sẽ 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 những bộ phận con của chính nó chứ không cần bảo rằng nó được xem toán dựa vào độ cao của content-area của các thành phần nhỏ đó. Vấn đề này tạo thành một khác hoàn toàn bự.

Xem thêm: Hướng Dẫn Chơi Tay Cầm Fifa Online 3, Hướng Dẫn Skill Fifa Online 3 Bằng Tay Cầm

Nghe dường như lạ, mà lại một phần tử inline bao gồm 2 chiều cao không giống nhau: độ cao content-area với chiều cao virtual-area (tôi đã tạo ra khái niệm virtual-area để đại diện mang lại độ cao mà lại họ thấy được được, bạn sẽ không thấy trong quánh tả đâu).

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


Các bộ phận inline bao gồm 2 chiều cao khác nhau

do đó, vấn đề này đã 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 phải 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ông giống nhau thân virtual-areacontent-area được điện thoại tư vấn là leading. Một nửa leading được thêm vào đó vào phía trên của content-area, nửa còn sót lại được thêm vào đó vào bên dưới. Do kia content-area luôn chính giữa của virtual-area.

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

Còn gồm các một số loại phần tử inline khác:

những thành phần inline thay thế (

Các phần tử inline thay thế, inline-block/inline-* và blocksified có content-area bằng với độ cao, xuất xắc line-height, của chúng

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

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

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

Trong trường thích hợp của bọn họ, phông Catamaran định nghĩa line gap với cái giá trị là 0, cần line-height: normal vẫn bởi với content-area, tức là 1640 đơn vị chức năng, hay một.64.

Để đối chiếu, font Arial định nghĩa em-square với mức giá trị 2048 đơn vị chức năng, ascender = 1854, descender = 434 và line gap = 67. Nghĩa là cùng với font-size: 100px thì content-area đã là 112px (1117 1-1 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 là 1.15). Tất cả những chỉ số này là của riêng biệt phông cùng được thiết lập vày người thiết kế font.

Do kia, phân minh rằng câu hỏi đặt line-height: 1 là một phương pháp làm cho xấu. Tôi xin đề cập lại rằng những quý hiếm ko đơn vị chức năng bao gồm tính tương đối với font-kích cỡ, không tương đối với content-area, với trường đúng theo virtual-area phải chăng hơn content-area là xuất phát của đa số sự việc.

Xem thêm: Bảng Ngọc Bổ Trợ Master Yi, Guide Master Yi Mã¹A 11 MớI NhấT


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

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

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

Với những phần tử inline thay thế, inline-bloông chồng cùng blocksified: padding, margin với border làm cho tăng height buộc phải có tác dụng tăng độ cao content-area với line-box.