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

Q: מה ההבדל בין block, inline ו-inline-block?

אלמנט block מתחיל בשורה חדשה וממלא את הרוחב הזמין. אלמנט inline זורם בתוך טקסט ומתעלם מ-width, מ-height ומ-margin אנכי. inline-block זורם בתוך טקסט כמו inline, אבל מקבל רוחב, גובה, padding ו-margin כמו block.

Q: מה ההבדל בין display: none ל-visibility: hidden?

display: none מסיר את האלמנט ואת המקום שלו. visibility: hidden הופך אותו לבלתי נראה אבל שומר את המקום שלו בפריסה, כך ששום דבר לא זז.

Q: האם div הוא block או inline כברירת מחדל?

Block. div, p, כותרות, ul, section ו-form הם block כברירת מחדל; span, a, strong, em, img, input ו-button הם inline או inline-block.

מה display עושה

לכל אלמנט יש ערך display שקובע איך הוא נפרס. שלושת הערכים שפוגשים ראשונים הם block, inline ו-inline-block. הנה שלוש תיבות זהות, עם אותם width, height, padding ו-margin, ורק ה-display שונה:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>block, inline, inline-block</title>
  <style>
    body { font-family: system-ui, sans-serif; line-height: 1.6; }
    .demo { border: 1px dashed #9ca3af; padding: 8px; margin-bottom: 12px; }
    .box {
      width: 120px; height: 40px;
      padding: 6px; margin: 10px;
      background: #bfdbfe; border: 2px solid #2563eb;
    }
    .block { display: block; }
    .inline { display: inline; }
    .inline-block { display: inline-block; }
  </style>
</head>
<body>
  <div class="demo">Text before <span class="box block" id="b">block</span> text after.</div>
  <div class="demo">Text before <span class="box inline" id="i">inline</span> text after.</div>
  <div class="demo">Text before <span class="box inline-block" id="ib">inline-block</span> text after.</div>
</body>
</html>

	`block`	`inline`	`inline-block`
מתחיל בשורה חדשה	כן	לא	לא
רוחב כברירת מחדל	ממלא את המכל	מתאים לתוכן	מתאים לתוכן
`width` ו-`height`	חלים	מתעלמים מהם	חלים
margin אנכי	חל	מתעלמים ממנו	חל
padding אנכי	דוחף את התוכן	מצויר, אבל לא מרחיק שורות זו מזו	דוחף את התוכן
אלמנטים טיפוסיים	`div`, `p`, `h1`, `ul`, `section`	`span`, `a`, `strong`, `em`	`button`, `input`, `img` (אלמנטים מוחלפים מתנהגים כך)

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

display: block

אלמנט block תופס את כל הרוחב הזמין ודוחף את מה שבא אחריו לשורה חדשה. הפיכת קישור ל-block היא הדרך להפוך שורה שלמה ללחיצה:

.menu a {
  display: block;       /* the full row is the link */
  padding: 10px 16px;
}

לבלוק אפשר לקבוע רוחב, ו-margin: 0 auto ממרכז אותו ברגע שיש לו רוחב, כמו שמראה עמוד מרכוז div.

display: inline-block

inline-block הוא דרך האמצע: הוא זורם בשורה כמו מילה, אבל אפשר לקבוע לו גודל. הוא שימושי לתגיות, לכפתורים ולאייקונים בתוך טקסט:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>inline-block badges</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .badge {
      display: inline-block;
      min-width: 24px;
      padding: 2px 8px;
      margin-inline-start: 4px;
      border-radius: 999px;
      background: #dc2626; color: white;
      font-size: 12px; font-weight: 700; text-align: center;
    }
  </style>
</head>
<body>
  <p>Inbox <span class="badge">3</span></p>
  <p>Notifications <span class="badge">12</span></p>
</body>
</html>

כמה תיבות inline-block בשורה מקבלות רווח קטן ביניהן מהרווח הלבן ב-HTML. לשורות של תיבות, display: flex על ההורה הוא הכלי הטוב יותר.

display: none מול visibility: hidden

שניהם הופכים אלמנט לבלתי נראה. ההבדל הוא אם הוא שומר את המקום שלו:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>none vs hidden</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .row { display: flex; gap: 8px; margin-bottom: 12px; }
    .row div { width: 70px; padding: 12px 0; text-align: center; background: #bbf7d0; border: 2px solid #16a34a; }
    .none { display: none; }
    .hidden { visibility: hidden; }
  </style>
</head>
<body>
  <div class="row"><div>1</div><div>2</div><div>3</div></div>
  <div class="row"><div>1</div><div class="none">2</div><div>3</div></div>
  <div class="row"><div>1</div><div class="hidden">2</div><div>3</div></div>
  <button type="button" id="toggle">Toggle box 2 in the first row</button>
  <script>
    document.getElementById('toggle').addEventListener('click', () => {
      document.querySelector('.row div:nth-child(2)').classList.toggle('none');
    });
  </script>
</body>
</html>

	`display: none`	`visibility: hidden`	`opacity: 0`
תופס מקום	לא	כן	כן
אפשר ללחוץ עליו	לא	לא	כן
נקרא על ידי קוראי מסך	לא	לא	כן
אפשר להנפיש אותו בצורה חלקה	לא	לא	כן

התכונה hidden של HTML עושה את אותו הדבר כמו display: none דרך גיליון הסגנונות של הדפדפן, ולכן כל כלל CSS שקובע display על האלמנט (למשל .card { display: flex; }) דורס אותה, והאלמנט מופיע שוב. הוסיפו [hidden] { display: none !important; } אם זה פוגע בכם.

כדי להסתיר משהו חזותית אבל להשאיר אותו לקוראי מסך (למשל תווית לכפתור אייקון), השתמשו במחלקה מסוג "visually hidden" במקום display: none.

display: flex ו-display: grid

שני אלה הופכים אלמנט למכל פריסה בשביל הילדים שלו:

display: flex מסדר את הילדים בשורה או בעמודה אחת, עם שליטה ביישור ובמרווחים. ראו flexbox.
display: grid מציב את הילדים בשורות ובעמודות בו זמנית.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>flex and grid</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .item { padding: 10px; background: #fde68a; border: 2px solid #f59e0b; text-align: center; }
    .flex { display: flex; gap: 8px; margin-bottom: 16px; }
    .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  </style>
</head>
<body>
  <div class="flex"><div class="item">flex 1</div><div class="item">flex 2</div><div class="item">flex 3</div></div>
  <div class="grid">
    <div class="item">grid 1</div><div class="item">grid 2</div><div class="item">grid 3</div>
    <div class="item">grid 4</div><div class="item">grid 5</div>
  </div>
</body>
</html>

המכל עצמו נשאר block. inline-flex ו-inline-grid עושים את אותו הדבר לילדים, אבל גורמים למכל לזרום בשורה, כמו inline-block.

שאר הערכים

ערך	מה הוא עושה
`flow-root`	בלוק שמכיל את ה-floats שלו ומונע מ-margin של ילדים לדלוף החוצה; ה-"clearfix" המודרני
`contents`	התיבה של האלמנט עצמו נעלמת, והילדים שלו מתנהגים כילדים של ההורה שלו. הימנעו מזה בכפתורים, ברשימות ובטבלאות: חלק מהדפדפנים מאבדים את המשמעות של האלמנט בשביל קוראי מסך
`list-item`	בלוק עם סימן רשימה, ברירת המחדל של `li`
`table`, `table-row`, `table-cell`	פריסת טבלה על אלמנטים שאינם טבלה
`inline-flex`, `inline-grid`	מכל flex או grid שיושב בשורה

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

הגדרת width או height על span או a. אלמנטי inline מתעלמים מהם. השתמשו ב-inline-block או ב-block.
margin אנכי על אלמנט inline. גם ממנו מתעלמים. אותו פתרון.
שימוש ב-display: none כדי להסתיר טקסט שמיועד לקוראי מסך. הוא מסתיר אותו גם מהם.
ציפייה שילד יופיע בתוך הורה עם display: none. שום דבר בתוך הורה מוסתר לא מוצג.
כלל display שדורס את התכונה hidden. כלל ה-CSS מנצח.
ניסיון להנפיש את display. הגדרת display: none מסתירה את האלמנט מיד, בלי דהייה; הנפישו את opacity והחליפו את display (או את visibility) בסוף.

שאלות נפוצות

מה ההבדל בין block, inline ו-inline-block?

אלמנט block מתחיל בשורה חדשה וממלא את הרוחב הזמין. אלמנט inline זורם בתוך טקסט ומתעלם מ-width, מ-height ומ-margin אנכי. inline-block זורם בתוך טקסט כמו inline, אבל מקבל רוחב, גובה, padding ו-margin כמו block.

מה עושה display: none?

הוא מסיר את האלמנט מהעמוד לגמרי: הוא לא תופס מקום, לא מוצג, ומוסתר מקוראי מסך. הילדים שלו מוסתרים יחד איתו, ואי אפשר להציג אותם עם ערך display משלהם.

מה ההבדל בין display: none ל-visibility: hidden?

display: none מסיר את האלמנט ואת המקום שלו. visibility: hidden הופך אותו לבלתי נראה אבל שומר את המקום שלו בפריסה, כך ששום דבר לא זז.

האם div הוא block או inline כברירת מחדל?

Block. div, p, כותרות, ul, section ו-form הם block כברירת מחדל; span, a, strong, em, img, input ו-button הם inline או inline-block.