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

Q: מה ההבדל בין rem ל-em?

rem יחסי לגודל הגופן של אלמנט השורש ( ), ולכן 1.5rem הוא אותו גודל בכל הדף. em יחסי לגודל הגופן של האלמנט עצמו (ב-font-size, לזה של ההורה), ולכן הוא מצטבר כשאלמנטים מקוננים זה בתוך זה.

Q: להשתמש ב-rem או ב-px לגודל גופן?

השתמשו ב-rem לגדלי גופן. הוא מכבד את הגדרת גודל הגופן ברירת המחדל של הקורא בדפדפן, ש-px מתעלם ממנה. הזום של הדפדפן מגדיל את שניהם, אבל לא כל הקוראים משתמשים בזום.

Q: מתי להשתמש ב-em במקום ב-rem?

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

Q: מה ההבדל בין 100vh ל-100dvh?

בדפדפנים בנייד, 100vh הוא הגובה כששורת הכתובת מוסתרת, ולכן אזור בגובה 100vh גבוה מהמסך הגלוי כל עוד השורה מוצגת. 100dvh (גובה viewport דינמי) עוקב אחרי השורה כשהיא מופיעה ונעלמת, ו-100svh הוא תמיד הגובה הקטן יותר.

rem vs em בהדגמה מקוננת אחת

rem יחסי לגודל הגופן של השורש (האלמנט <html>, 16px כברירת מחדל). em יחסי לגודל הגופן הנוכחי, שב-font-size פירושו זה של ההורה. קננו את אותה מחלקה שלוש פעמים וההבדל נראה מיד:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>rem vs em</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .em  { font-size: 1.25em;  border-inline-start: 4px solid #f59e0b; padding-inline-start: 8px; }
    .rem { font-size: 1.25rem; border-inline-start: 4px solid #2563eb; padding-inline-start: 8px; }
  </style>
</head>
<body>
  <div class="em">em <div class="em">em <div class="em">em</div></div></div>
  <div class="rem">rem <div class="rem">rem <div class="rem">rem</div></div></div>
  <p id="out"></p>
  <script>
    const sizes = (cls) => [...document.querySelectorAll('.' + cls)].map((el) => getComputedStyle(el).fontSize).join(', ');
    document.getElementById('out').textContent = 'em: ' + sizes('em') + '  |  rem: ' + sizes('rem');
  </script>
</body>
</html>

הגדלים המודפסים הם מה שהדפדפן חישב. כל 1.25em מכפיל את גודל ההורה שלו: 20px, אחר כך 25px, ואז 31.25px. כל 1.25rem מסתכל רק על השורש: 20px, 20px, 20px. ההצטברות הזו היא הסיבה שגדלי גופן ב-em יוצאים משליטה ברשימות ובתפריטים מקוננים, ולכן רוב האתרים מגדירים גדלי גופן ב-rem.

למה כל יחידה יחסית

יחידה	יחסית ל	יחידה אחת כברירת מחדל
`px`	לשום דבר (פיקסל CSS)	1px
`rem`	גודל הגופן של אלמנט השורש (`html`)	16px
`em`	גודל הגופן של האלמנט; ל-`font-size` עצמו, זה של ההורה	16px ברמה העליונה
`%`	תלוי במאפיין (ראו בהמשך)
`vw` / `vh`	1% מהרוחב / הגובה של ה-viewport
`dvh`, `svh`, `lvh`	1% מגובה ה-viewport הדינמי, הקטן או הגדול
`vmin` / `vmax`	1% מהצלע הקטנה / הגדולה של ה-viewport
`ch`	הרוחב של התו "0" בגופן הנוכחי	בערך חצי em
`ex`	גובה האות x בגופן הנוכחי	בערך חצי em

פיקסל CSS הוא לא פיקסל של המכשיר: בטלפון עם מסך 3x, 1px הוא ברוחב 3 פיקסלים של המכשיר. הוא שומר על גודל חזותי דומה בערך בכל המסכים, ולכן px עדיין מתאים לגבולות ולצללים.

em לריווח שגדל עם הטקסט

em הוא לא רק לגדלי גופן. ב-padding, margin, width או border-radius הוא אומר "פי גודל הגופן של האלמנט הזה". כך מחלקת כפתור אחת עובדת בכל גודל:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>em padding</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .btn {
      padding: 0.5em 1em;   /* scales with this button's own font size */
      border-radius: 0.4em;
      border: 0;
      background: #2563eb;
      color: white;
      margin: 4px;
    }
    .small { font-size: 0.75rem; }
    .large { font-size: 1.5rem; }
  </style>
</head>
<body>
  <button class="btn small">Small</button>
  <button class="btn">Normal</button>
  <button class="btn large">Large</button>
  <p id="out"></p>
  <script>
    document.getElementById('out').textContent = [...document.querySelectorAll('.btn')]
      .map((b) => b.textContent + ': font ' + getComputedStyle(b).fontSize + ', padding ' + getComputedStyle(b).paddingTop + ' ' + getComputedStyle(b).paddingLeft)
      .join('  |  ');
  </script>
</body>
</html>

ה-padding של כל כפתור הוא חצי מגודל הגופן שלו באנכי וגודל גופן אחד באופקי, ולכן שלושתם נראים כמו אותו כפתור בשלושה גדלים. עם padding ב-px הייתם צריכים כלל padding נפרד לכל גודל.

שימו לב שכפתורים לא יורשים כברירת מחדל את גודל הגופן של הדף (הדפדפנים נותנים לפקדי טפסים גודל משלהם), ולכן הכפתור האמצעי כאן הוא 13.33px ב-Chrome, לא 16px. הוסיפו font: inherit לכפתורים ולשדות קלט כשאתם רוצים שיתאימו לדף.

אחוזים: זה תלוי במאפיין

ל-% אין משמעות אחת. כל מאפיין קובע ממה הוא אחוז:

מאפיין	`%` יחסי ל
`width`, `max-width`, `left`, `right`	הרוחב של ההורה (של הבלוק המכיל)
`height`, `top`, `bottom`	הגובה של ההורה, ורק אם להורה יש גובה מוגדר
`padding`, `margin` (כל ארבעת הצדדים)	הרוחב של ההורה
`font-size`	גודל הגופן של ההורה (`150%` = `1.5em`)
`line-height`	גודל הגופן של האלמנט עצמו
`transform: translate()`	הגודל של האלמנט עצמו

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Percent</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .parent { width: 400px; background: #e5e7eb; padding: 8px 0; }
    .child { width: 50%; height: 50%; padding-top: 5%; background: #16a34a; color: white; }
  </style>
</head>
<body>
  <div class="parent"><div class="child" id="c">child</div></div>
  <p id="out"></p>
  <script>
    const s = getComputedStyle(document.getElementById('c'));
    const r = document.getElementById('c').getBoundingClientRect();
    document.getElementById('out').textContent =
      'width ' + s.width + ', padding-top ' + s.paddingTop + ', rendered height ' + Math.round(r.height) + 'px';
  </script>
</body>
</html>

width: 50% הוא 200px, חצי מההורה. padding-top: 5% הוא 20px: 5% מהרוחב של ההורה, לא מהגובה שלו. ו-height: 50% לא עושה כלום, כי להורה אין גובה מוגדר, ולכן הילד גבוה רק כמו הטקסט שלו ועוד ה-padding הזה. הדף על width ו-height מסביר את הכלל הזה בפירוט.

vw, vh ושורת הכתובת בנייד

1vw הוא 1% מרוחב ה-viewport ו-1vh הוא 1% מהגובה שלו. הן שימושיות לאזורים במסך מלא ולגדלים גמישים (לרוב בתוך clamp()). בטלפונים יש ל-vh מלכודת: שורת הכתובת של הדפדפן נכנסת ויוצאת בזמן הגלילה, ו-100vh הוא הגובה בלי השורה, ולכן hero עם height: 100vh נחתך בתחתית כשהשורה מוצגת. היחידות החדשות יותר פותרות את זה:

יחידה	הגובה שבשימוש
`100vh`	ה-viewport הגדול (סרגלים מוסתרים) ברוב הדפדפנים בנייד
`100svh`	ה-viewport הקטן (סרגלים מוצגים): תמיד נכנס במסך
`100lvh`	ה-viewport הגדול, במפורש
`100dvh`	ה-viewport הדינמי: משתנה כשהסרגלים זזים

.hero {
  min-height: 100vh;  /* fallback for older browsers */
  min-height: 100svh; /* fits the screen even with the address bar visible */
}

גם ל-vw יש מלכודת משלו: 100vw כולל את הרוחב של פס גלילה אנכי כשפס הגלילה תופס מקום (כמו ב-Windows), ולכן width: 100vw יכול להיות רחב יותר מהדף ולהוסיף פס גלילה אופקי. השתמשו ב-width: 100% בשביל "כל הרוחב של ההורה".

ch לאורך שורה קריא

ch הוא הרוחב של התו "0", ולכן max-width: 65ch מגביל פסקה לכ-65 תווים בשורה, אורך קריאה נוח, בכל גודל גופן:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>ch</title>
  <style>
    body { font-family: Georgia, serif; }
    p { max-width: 40ch; background: #f3f4f6; padding: 8px; }
    .big { font-size: 1.4rem; }
  </style>
</head>
<body>
  <p>This paragraph is limited to 40ch, about forty characters per line, however wide the page is.</p>
  <p class="big">At a bigger font size the box widens with the text, so each line still holds about forty characters.</p>
</body>
</html>

באיזו יחידה להשתמש

בשביל	השתמשו ב	למה
גדלי גופן	`rem`	עקבי בכל מקום, מכבד את הגדרת גודל הגופן של הקורא
padding ו-gaps ברכיבים	`rem` או `em`	`em` כשהוא צריך לגדול עם הטקסט של הרכיב עצמו
גבולות, קווים דקים, צללים	`px`	צריכים להישאר דקים בכל גודל גופן
רוחבי פריסה	`%`, `fr`, `max-width` ב-`rem` או ב-`ch`	עוקבים אחרי הקונטיינר, מגבילים את אורך השורה
אזורים במסך מלא	`svh` / `dvh` (עם `vh` כגיבוי)	מתמודדים עם שורות הכתובת בנייד
טיפוגרפיה גמישה	`clamp()` שמשלב `rem` ו-`vw`	גדלה עם המסך בתוך גבולות

למה rem מכבד את הקוראים ו-px לא

לדפדפנים יש הגדרה לגודל הגופן ברירת המחדל, ואנשים שצריכים טקסט גדול יותר משתמשים בה. היא משנה את גודל הגופן של השורש, ולכן כל מה שמוגדר ב-rem וב-em גדל איתה. font-size: 14px נשאר 14px לא משנה מה הקורא בחר. הזום של הדפדפן מגדיל גם px, אבל הגדרת גודל הגופן היא זו שקוראים רבים מסתמכים עליה. זו הסיבה העיקרית להגדיר גדלי גופן ב-rem.

יש אתרים שמגדירים html { font-size: 62.5%; } כדי ש-1rem יהיה שווה ל-10px והחישובים יהיו קלים יותר. זה עדיין מכבד את ההגדרה של הקורא (62.5% ממה שהוא בחר), אבל זכרו להגדיר font-size קריא ב-body, אחרת כל אלמנט בלי גודל משלו יציג טקסט של 10px.

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

גדלי גופן ב-em באלמנטים מקוננים. הם מוכפלים בכל רמה. השתמשו ב-rem לגדלי גופן.
height: 50% שלא עושה כלום. להורה צריך להיות גובה מוגדר כדי שגובה באחוזים יעבוד.
לצפות ש-padding-top: 10% יעקוב אחרי הגובה של ההורה. אחוזים של padding ו-margin אנכיים משתמשים ברוחב של ההורה.
width: 100vw שיוצר פס גלילה אופקי. הוא כולל את פס הגלילה. השתמשו ב-100%.
height: 100vh שנחתך בטלפונים. השתמשו ב-100svh או ב-100dvh.
להגדיר html { font-size: 12px }. ערך ב-px על השורש דורס את הגדרת גודל הגופן של הקורא בכל הדף. השאירו את השורש כמו שהוא או השתמשו באחוז.

שאלות נפוצות

מה ההבדל בין rem ל-em?

rem יחסי לגודל הגופן של אלמנט השורש (<html>), ולכן 1.5rem הוא אותו גודל בכל הדף. em יחסי לגודל הגופן של האלמנט עצמו (ב-font-size, לזה של ההורה), ולכן הוא מצטבר כשאלמנטים מקוננים זה בתוך זה.

כמה פיקסלים זה 1rem?

16px כברירת מחדל, כי הדפדפנים קובעים את גודל הגופן של השורש ל-16px. אם המשתמש מגדיל את גודל הגופן ברירת המחדל בהגדרות הדפדפן, או אם אתם מגדירים html { font-size: ... }, גם 1rem משתנה בהתאם.

להשתמש ב-rem או ב-px לגודל גופן?

השתמשו ב-rem לגדלי גופן. הוא מכבד את הגדרת גודל הגופן ברירת המחדל של הקורא בדפדפן, ש-px מתעלם ממנה. הזום של הדפדפן מגדיל את שניהם, אבל לא כל הקוראים משתמשים בזום.

מתי להשתמש ב-em במקום ב-rem?

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

מה ההבדל בין 100vh ל-100dvh?

בדפדפנים בנייד, 100vh הוא הגובה כששורת הכתובת מוסתרת, ולכן אזור בגובה 100vh גבוה מהמסך הגלוי כל עוד השורה מוצגת. 100dvh (גובה viewport דינמי) עוקב אחרי השורה כשהיא מופיעה ונעלמת, ו-100svh הוא תמיד הגובה הקטן יותר.

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