תיעוד CSS עם דוגמאות להרצה: גובה שורה

Q: האם ל-line-height צריכה להיות יחידה?

בדרך כלל לא. ערך בלי יחידה כמו 1.5 מוכפל בגודל הגופן של כל אלמנט, כך שהוא נשאר פרופורציונלי גם בילדים בגודל אחר. ערך עם יחידה מחושב פעם אחת ועובר בירושה כאורך קבוע.

מה line-height עושה

line-height קובע את הגובה של כל שורת טקסט. ההפרש בין הגובה הזה לגובה שהגופן עצמו צריך מתחלק לשניים ומתווסף מעל האותיות ומתחתן, ולכן זו הדרך לשלוט במרווח בין השורות.

<!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>

שלוש הפסקאות משתמשות בגופן של 16px. גובה השורות הוא 16px, 24px ו-32px.

ערכים: בלי יחידה, אורך, אחוז, normal

ערך	דוגמה	גובה שורה לטקסט של 16px	עובר בירושה לילדים בתור
מספר	`1.5`	24px	המספר (1.5), מחושב מחדש בכל אלמנט
אורך	`24px`, `1.5em`, `1.5rem`	24px	האורך המחושב (24px)
אחוז	`150%`	24px	האורך המחושב (24px)
`normal`	`normal`	מהגופן, לרוב בערך 1.2	`normal`

השורה הראשונה והשנייה נראות אותו דבר על אלמנט אחד. ההבדל מופיע רק כשלילד יש גודל גופן אחר, וזה הנושא של הסעיף הבא.

למה ערך בלי יחידה הוא ברירת המחדל הנכונה

גובה שורה של 1.5em או 150% מומר לפיקסלים על ההורה, והילדים יורשים את הפיקסלים האלה. ילד עם גופן גדול יותר מקבל אז שורות נמוכות מהאותיות שלו. 1.5 בלי יחידה עובר בירושה כמספר עצמו ומוכפל בגודל הגופן של כל ילד.

<!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>

שתי הכותרות נשברות לשתי שורות. הראשונה יורשת שורות של 21px לאותיות של 32px, ולכן השורות שלה חופפות. השנייה מקבלת שורות של 32 × 1.5 = 48px. הגדירו line-height פעם אחת על body כמספר, ורוב הדפים לא יצטרכו אותו שוב.

נסו ערכים בעצמכם

<!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>

נסו 1, 2, 30px, 200% ו-normal. Chrome מדווח על normal כמילה עצמה ולא כערך בפיקסלים, כי הגודל שלו מגיע מהגופן.

ערכים טובים לטקסט קריא

טקסט רץ: 1.4 עד 1.6. שורות ארוכות צריכות גובה שורה גדול יותר, כדי שהעין תמצא את תחילת השורה הבאה.
כותרות: 1.1 עד 1.3. טקסט גדול עם מרווח של 1.5 נראה כמו שורות נפרדות ולא ככותרת אחת.
כפתורים ותוויות של שורה אחת: 1 עד 1.25, עם ריפוד בשביל הגובה.

לנגישות, קריטריון ההצלחה 1.4.12 של WCAG דורש שהדף ימשיך לעבוד כשקורא מגדיר גובה שורה של פי 1.5 מגודל הגופן, ולכן הימנעו מגבהים קבועים בקופסאות טקסט שיחתכו אותו.

מרכוז אנכי של שורת טקסט אחת

כשקופסה מכילה בדיוק שורה אחת, line-height ששווה לגובה הקופסה מציב את הטקסט באמצע האנכי שלה, כי המקום העודף מתחלק שווה מעל ומתחת:

<!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>

זה נשבר ברגע שהטקסט נשבר לשתי שורות, כי אז כל שורה בגובה 40px. לכל דבר שיכול להישבר, מרכזו עם flexbox במקום, כמו שמוצג בדף על מרכוז div.

הקיצור font

הקיצור font קובע גודל וגובה שורה יחד, עם לוכסן:

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

הקיצור מאפס כל מאפיין גופן שהוא לא מזכיר (כולל את line-height ל-normal כשמשמיטים את החלק שאחרי הלוכסן), ולכן כתבו אותו לפני כללי font-* בודדים.

טעויות נפוצות

שימוש ב-em או ב-% על מיכל. הילדים יורשים אורך קבוע. השתמשו במספר בלי יחידה.
height קבוע על קופסת טקסט. כשהטקסט נשבר או שהקורא מגדיל את המרווחים, הוא גולש. תנו לתוכן לקבוע את הגובה.
טקסט רץ צפוף מדי. line-height: 1 הופך פסקאות לקשות לקריאה. התחילו מ-1.5.
לצפות ש-line-height יוסיף מרווח בין פסקאות. זה תפקיד ה-margin של הפסקאות.
להסתמך על normal. הוא משתנה מגופן לגופן, ולכן הפריסה זזה כשהגופן משתנה.

שאלות נפוצות

מה line-height עושה ב-CSS?

הוא קובע את הגובה של כל קופסת שורה של טקסט. המקום העודף מעבר לגובה של הגופן עצמו מתחלק שווה מעל האותיות ומתחתן, כך ש-line-height גדול יותר פירושו יותר מרווח בין השורות.

האם ל-line-height צריכה להיות יחידה?

בדרך כלל לא. ערך בלי יחידה כמו 1.5 מוכפל בגודל הגופן של כל אלמנט, כך שהוא נשאר פרופורציונלי גם בילדים בגודל אחר. ערך עם יחידה מחושב פעם אחת ועובר בירושה כאורך קבוע.

מה line-height טוב לטקסט רץ?

בין 1.4 ל-1.6 לפסקאות, ובערך 1.1 עד 1.3 לכותרות גדולות. ההנחיה של WCAG ברמת AAA דורשת לפחות 1.5 בפסקאות.

מה זה line-height: normal?

ברירת המחדל. הדפדפן משתמש בערך מתוך המדדים של הגופן עצמו, בדרך כלל בערך 1.2 אבל שונה בכל גופן, ולכן אי אפשר לצפות אותו בין גופנים.

איך משנים את המרווח בין השורות ב-HTML?

ל-HTML אין מאפיין של מרווח שורות. השתמשו במאפיין ה-CSS, למשל <p style="line-height: 2;"> לרווח כפול.

מושגים קשורים