CSS line-height: giá trị không đơn vị, px, em và ví dụ

line-height làm gì

line-height đặt chiều cao của mỗi dòng chữ. Phần chênh lệch giữa chiều cao đó và chiều cao mà font thực sự cần được chia đôi, thêm vào phía trên và phía dưới các chữ, nên đây chính là cách bạn điều chỉnh khoảng cách giữa các dòng.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Line height</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 16px; color: #111827; }
    .row { display: flex; gap: 16px; align-items: flex-start; }
    p { margin: 0; width: 200px; padding: 8px; background: #e5e7eb; }
    .tight { line-height: 1; }
    .comfy { line-height: 1.5; }
    .double { line-height: 2; }
  </style>
</head>
<body>
  <div class="row">
    <p class="tight">line-height: 1. Lines touch and long text is hard to follow.</p>
    <p class="comfy">line-height: 1.5. Comfortable spacing for a paragraph.</p>
    <p class="double">line-height: 2. Double spacing, like a draft.</p>
  </div>
</body>
</html>

Cả ba đoạn văn đều dùng font 16px. Các dòng lần lượt cao 16px, 24px và 32px.

Các loại giá trị: không đơn vị, độ dài, phần trăm, normal

Trên một phần tử, hàng thứ nhất và thứ hai trông giống hệt nhau. Khác biệt chỉ lộ ra khi phần tử con có cỡ chữ khác, và đó là nội dung của phần tiếp theo.

Vì sao không đơn vị là lựa chọn mặc định đúng

Line height 1.5em hay 150% được đổi ra pixel ngay trên phần tử cha, và phần tử con kế thừa số pixel đó. Khi đó một phần tử con có chữ lớn hơn sẽ nhận dòng thấp hơn cả chữ của nó. Còn 1.5 không đơn vị được kế thừa nguyên con số và nhân với cỡ chữ riêng của từng phần tử con.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Unitless vs em</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; color: #111827; }
    .box { width: 220px; padding: 8px; margin-bottom: 12px; background: #e5e7eb; }
    .em { line-height: 1.5em; }       /* 21px, inherited as 21px */
    .unitless { line-height: 1.5; }   /* inherited as 1.5 */
    h2 { font-size: 32px; margin: 0; }
  </style>
</head>
<body>
  <div class="box em">
    <!-- line-height: 1.5em -->
    <h2 id="em-h">A heading that wraps</h2>
  </div>
  <div class="box unitless">
    <h2 id="num-h">A heading that wraps</h2>
  </div>
  <p id="out"></p>
  <script>
    const lh = (id) => getComputedStyle(document.getElementById(id)).lineHeight;
    document.getElementById('out').textContent =
      'em box heading: ' + lh('em-h') + ', unitless box heading: ' + lh('num-h');
  </script>
</body>
</html>

Cả hai tiêu đề đều xuống thành hai dòng. Tiêu đề đầu kế thừa dòng 21px cho chữ 32px, nên các dòng chồng lên nhau. Tiêu đề thứ hai nhận dòng 32 × 1.5 = 48px. Chỉ cần đặt line-height một lần trên body bằng một con số, phần lớn trang web sẽ không bao giờ phải đụng lại.

Tự thử các giá trị

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Line height tester</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    #sample { width: 320px; margin-top: 12px; padding: 8px; background: #e5e7eb; }
  </style>
</head>
<body>
  <label>line-height: <input id="val" value="1.5" size="12"></label>
  <p id="sample">Line height changes the space between the lines of this paragraph. Type a number, a length or a percentage and watch the gaps change.</p>
  <p><code id="out"></code></p>
  <script>
    const sample = document.getElementById('sample');
    const input = document.getElementById('val');
    const show = () => {
      sample.style.lineHeight = input.value;
      document.getElementById('out').textContent =
        'computed: ' + getComputedStyle(sample).lineHeight;
    };
    input.addEventListener('input', show);
    show();
  </script>
</body>
</html>

Hãy thử 1, 2, 30px, 200% và normal. Chrome báo normal đúng bằng từ đó chứ không đổi ra pixel, vì kích thước của nó đến từ font.

Giá trị nên dùng để văn bản dễ đọc

• Đoạn văn: từ 1,4 đến 1,6. Dòng càng dài càng cần line height lớn để mắt dễ tìm đầu dòng tiếp theo.
• Tiêu đề: từ 1,1 đến 1,3. Chữ lớn mà giãn dòng 1,5 trông như các dòng rời rạc chứ không còn là một tiêu đề.
• Nút và nhãn một dòng: từ 1 đến 1,25, dùng padding để tạo chiều cao.

Về khả năng tiếp cận, tiêu chí thành công 1.4.12 của WCAG yêu cầu trang vẫn dùng được khi người đọc đặt line height bằng 1,5 lần cỡ chữ, nên tránh đặt chiều cao cố định cho hộp chữ vì chữ có thể bị cắt.

Căn giữa theo chiều dọc một dòng chữ

Khi một hộp chỉ chứa đúng một dòng, đặt line-height bằng chiều cao của hộp sẽ đưa chữ vào chính giữa theo chiều dọc, vì phần dư được chia đều lên trên và xuống dưới:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Single line centering</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .badge {
      height: 40px;
      line-height: 40px;
      padding: 0 16px;
      width: max-content;
      background: #2563eb;
      color: white;
      border-radius: 20px;
    }
  </style>
</head>
<body>
  <div class="badge" id="badge">One line, centered</div>
</body>
</html>

Cách này hỏng ngay khi chữ xuống thành hai dòng, vì lúc đó mỗi dòng cao 40px. Với nội dung có thể xuống dòng, hãy căn giữa bằng flexbox, như trong trang căn giữa một div.

Thuộc tính viết tắt font

Thuộc tính viết tắt font đặt cỡ chữ và line height cùng lúc, ngăn cách bằng dấu gạch chéo:

body {
  font: 16px/1.5 system-ui, sans-serif; /* size 16px, line-height 1.5 */
}

Thuộc tính viết tắt này đặt lại mọi thuộc tính font mà nó không nhắc đến (kể cả đưa line-height về normal khi bạn bỏ phần sau dấu gạch chéo), nên hãy viết nó trước các quy tắc font-* riêng lẻ.

Lỗi thường gặp

• Dùng em hoặc % trên phần tử chứa. Phần tử con sẽ kế thừa một độ dài cố định. Hãy dùng số không đơn vị.
• Đặt height cố định cho hộp chữ. Khi chữ xuống dòng hoặc người đọc tăng khoảng cách, chữ sẽ tràn ra ngoài. Hãy để nội dung quyết định chiều cao.
• Đoạn văn quá sát. line-height: 1 khiến đoạn văn khó đọc. Hãy bắt đầu từ 1,5.
• Mong line-height tạo khoảng cách giữa các đoạn văn. Đó là việc của margin trên các đoạn văn.
• Dựa vào normal. Giá trị này thay đổi theo từng font, nên bố cục sẽ xê dịch khi đổi font.