Line-height là gì

      50
ttmn.mobi chia sẻ mọi sản phẩm về trò chơi / phần mềm / Thủ Thuật dành riêng cho máy tính với mọi tin hay nhất và những thông tin kỹ năng hỏi đáp.

Bài viết được dịch từ bài bác Deep dive CSS: font metrics, line-height and vertical-align của tác giả Vincent De Oliveira.

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

Đang xem: Line-height là gì

Line-height cùng vertical-align là các thuộc tính CSS đối chọi giản. Đơn giản đến nỗi hầu hết họ đều bị thuyết phục rằng bản thân đã trọn vẹn hiểu cách chúng vận động và cách sử dụng chúng. Nhưng không phải vậy. Thực sự bọn chúng phức tạp, chắc hẳn rằng là phức hợp nhất, do chúng đóng vai trò chủ yếu trong bài toán tạo thành trong số những tính năng ít được nghe biết của CSS: inline formatting context.

Ví dụ, line-height có thể nhận giá chỉ trị là một độ dài hoặc một cực hiếm không đối kháng vị, với cái giá trị mang đị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õ rằng nó là (hoặc phải là) 1, hoặc rất có thể là 1.2, thậm chí đặc tả của CSS còn không mô tả cụ thể về sự việc này. Chúng ta biết rằng quý giá không đơn vị của line-height có tính tương so 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 giống tuyệt khác nhau? Nó tất cả thực sự nhận quý hiếm giữa 1 và 1.2? cùng vertical-align, chân thành và ý nghĩa liên quan cho line-height của chính nó là gì?

Tìm gọi sâu về một vẻ ngoài không-đơn-giản của CSS…

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

Hãy coi đoạn code HTML 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á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 cùng một font-size với các font-family không giống nhau sẽ tạo thành các bộ phận với độ cao khác nhau:

*

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

Tuy bọn họ đoán trước được việc đó, nhưng vì sao font-size: 100px không xuất hiện các bộ phận với độ cao 100px? Tôi đang đo và nhận được những giá trị: Helvetica: 115px, Gruppo: 97px cùng Catamaran: 164px

*

Các bộ phận với font-size: 100px gồm chiều cao biến hóa từ 97px cho 164px

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

Dựa trên solo vị kha khá của nó, những chỉ số của phông chữ (font metrics) vẫn được xác định (ascender, descender, capital height, x-height, v..v..). để ý là một vài giá trị hoàn toàn có thể tràn ra ngoài em-square.

Trên trình duyệt, các đơn vị tương đối hoàn toàn có thể được co giãn để vừa với font-size hy vọng muốn.

Hãy mở font Catamaran bởi FontForge nhằm xem các chỉ số:

em-square là 1000ascender là 1100 cùng descender là 540. Sau khoản thời gian kiểm tra thử, có vẻ những trình để mắt sử dụng các giá trị HHead Ascent/Descent bên trên MacOS và Win Ascent/Descent trên Windows (các cực hiếm này rất có thể khác nhau!). Họ cũng chú ý rằng Capital Height là 680 và X height là 485.

*

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

Điều đó tức là font Catamaran áp dụng 1100 + 540 đơn vị trên 1000 đơn vị em-square, hiệu quả là 164px khi tùy chỉnh giá trị font-size: 100px. độ cao được đo lường (computed height) này khái niệm content-area của một phần tử với tôi đang đề cập tới định nghĩa này nhìn trong suốt phần còn sót lại của bài bác viết. Bạn có thể coi content-area là vùng cơ mà thuộc tính background được áp dụng (điều này cũng không hoàn toàn chính xác).

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

*

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

Trước khi mày mò kỹ hơn, hay xem xem hầu hết thứ bên trên có ý nghĩa sâu sắc gì. Khi một phần tử được hiển thị trên màn hình, nó rất có thể được tạo vị nhiều dòng, phụ thuộc độ rộng lớn của nó. Mỗi cái được tạo bởi một tốt nhiều phần tử inline (thẻ HTML giỏi các phần tử inline vô danh như text) cùng mỗi cá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 thành phần con của nó. Vì thế trình săn sóc sẽ đo lường chiều cao của mỗi phần tử inline, từ đó tính ra độ cao của line-box (từ điểm cao nhất đến điểm thấp độc nhất của các thành phần con). Công dụng là một line-box luôn luôn đủ cao để có thể chứa tất cả các thành phần con của chính nó (mặc định là vậy).

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

Nếu chúng ta sửa code HTML sinh sống trên thành rứa này:

p> Good design 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ẽ sinh ra 3 line-box:

line-box đầu tiên và cuối cùng chứa 1 phần tử inline vô danh (text)line-box thứ 2 chứa 2 thành phần inline vô danh và 3 thẻ

*

Một thẻ (đường viền đen) được sinh sản thành từ các line-box (đường viền trắng) chứa các bộ 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à đúng mực hơn là phần tử sử dụng font Catamaran.

Phần cực nhọc trong bài toán tạo thành line-box là họ không thực sự nhận thấy hay điều hành và kiểm soát được nó bởi CSS. Trong cả việc áp dụng thuộc tính background vào ::first-line cũng ko cho họ một tín hiệu trực quan liêu về chiều cao của line-box đầu tiên.

line-height: những vấn đề và hơn thế nữa nữa

Tới giờ, tôi đã ra mắt tới chúng ta 2 khái niệm: content-area với line-box. Nếu bạn nhớ, tôi vẫn nói rằng chiều cao của một line-box được thống kê giám sát dựa trên độ cao của các bộ phận con của nó chứ không cần nói rằng nó được giám sát và đo lường dựa trên chiều cao của content-area của các bộ phận con đó. Điều này tạo ra một khác biệt lớn.

Xem thêm: What Is A Mill Test Certificate Là Gì ? Chứng Chỉ Co Cq Là Gì?

Nghe dường như lạ, nhưng một phần tử inline có 2 chiều cao khác nhau: chiều cao content-area và độ cao virtual-area (tôi đã tạo ra khái niệm virtual-area để đại diện cho độ cao mà chúng ta 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 có mang bởi những chỉ số của fonts (như sẽ nói sống trên).chiều cao virtual-area là line-height, và nó là chiều cao được cần sử dụng để giám sát và đo lường chiều cao của line-box.

*

Các bộ phận inline có 2 chiều cao không giống nhau

Như vậy, vấn đề này đã phá đổ 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 như vậy.

*

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

Chiều cao khác biệt giữa virtual-area cùng content-area được gọi 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 sót lại được thêm vào đó vào phía dưới. Vì vậy content-area luôn luôn ở thân của virtual-area.

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

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

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

*

Các phần tử inline cố gắng thế, inline-block/inline-* và blocksified gồm content-area bằng với chiều cao, giỏi line-height, của chúng

Tuy nhiên, vụ việc của họ là giá trị normal của line-height là bao nhiêu? cùng câu trả lời, như việc tính toán chiều cao content-area, được search thấy trong số chỉ số của font.

Vậy thì hãy quay trở về với FontForge. Em-square của Catamaran là 1000, nhưng chúng ta thấy nhiều giá trị ascender/descender khác nhau:

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

Trong trường đúng theo của chúng ta, fonts Catamaran có mang line gap với giá trị là 0, bắt buộc line-height: normal sẽ bởi với content-area, tức là 1640 solo vị, xuất xắc 1.64.

Để so sánh, font Arial định nghĩa em-square với mức giá trị 2048 đối kháng vị, ascender = 1854, descender = 434 với line gap = 67. Nghĩa là với font-size: 100px thì content-area đang là 112px (1117 đối chọi 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 1.15). Tất cả các chỉ số này là của riêng rẽ font và được cấu hình thiết lập bởi người xây đắp font.

Do đó, phân minh rằng vấn đề đặt line-height: một là một bí quyết làm xấu. Tôi xin đề cập lại rằng các giá trị không đơn vị có tính tương so với font-size, không tương đối với content-area, với trường phù hợp virtual-area thấp hơn content-area là xuất phát của không ít vấn đề.

*

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

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

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

với các phần tử inline, padding cùng border làm cho tăng vùng background, nhưng không làm tăng chiều cao content-area (cũng như độ cao của line-box). Cho nên vì thế content-area chưa phải lúc nào thì cũng là thứ các bạn nhìn thấy trên màn hình. Margin-top với margin-bottom không có tác dụng.

Với các phần tử inline cố thế, inline-block cùng blocksified: padding, margin cùng border làm cho tăng height yêu cầu làm tăng chiều cao content-arealine-box.