display – המדריך המלא להגדרה

display – המדריך המלא להגדרה

במאמר הזה נסביר בעז"ה על סוגי הערכים שניתן לתת תחת ההגדרה של display. ומה המשמעות של כל הגדרה לעומת ההגדרות האחרות ובכלל.

display: none

נתחיל מהפשוטה ביותר – האלמנט כאילו לא קיים. הוא לא נראה, הוא לא תופס מקום, פוקוס לא מגיע אליו.

display: block

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

מאפיינים:

  • כברירת מחדל רוחבו הוא כרוחב האלמנט שמכיל אותו.
  • מסוגל לקבל margin/ padding/ width/ height/ clear.
  • כדי להעמיד מס' בלוקים בשורה – ניתן להשתמש בהגדרת float.
  • אין משמעות לvertical-align

משמש כברירת מחדל עבור:

<div><p> ועוד וכל עבור אלמנטים של html5

display: inline

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

מאפיינים:

  • רוחבו הוא הרוחב של התוכן שלו.
  • לא מסוגל לקבל הגדרות של בלוק כמו width, height, margin, ובחלק מהדפדפנים padding.
  • עובד טוב עם vertical-align

משמש כברירת מחדל עבור:

<a><span>ועוד

display: inline-block

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

מאפיינים:

  • כברירת מחדל רוחבו הוא הרוחב של התוכן שלו
  • מסוגל לקבל הגדרת רוחב/גובה/שוליים ומרחקים
  • להגדרת clear אין השפעה על מעבר האלמנטים ל"שורה" הבאה.
  • עובד טוב עם vertical-align.

הערה אחת

בגלל שהאלמנטים בinline-block משמשים כמו מילים במשפט, נוסף ביניהם הרווח שנוסף אוטומטית בין מילים במשפט. לכן ניתן לראות לפעמים ששתי אלמנטים בעלי inline-block, שהרוחבים שלהם משלימים ל100 (למשל 50% לכל אחד), ואין להם margin, ובכל זאת השני נופל שורה, זה בגלל הרווח האמור.

איך מתגברים על זה? פשוט מאד. עד כמו שזה יישמע מוזר, הוספת ההגדרה font-size: 0 לאלמנט האב שלהם יפתור את הבעיה.

איך זה עובד?

מאחר והרווח בין מילים במשפט תלוי בגודל הפונט של האותיות – ברגע שגודל התווים יהיה 0 (font-size( – אוטומטית גם הרווחים בין המילים יהיה 0, וכך הרווח בין האלמנטים גם הוא יהיה 0. 🙂

display: table

לעיתים נרצה להגדיר לאזור מסוים בעמוד נראות של טבלה, למרות שמבחינה סמנטית – מדובר באלמנטים אחרים, כמו <div< ואחרים.

ניתן לעשות זאת באמצעות יצירת מבנה htmlי הדומה למבנה הטבלה, ואז להגדיר לאלמנטים display בהתאם:

table

table-body

table-row

table-cell

וכן הלאה.

יש לקחת בחשבון שמרגע שאלמנט הוגדר כך – הוא יקבל את אותה התנהגות בדיוק כמו המקור. לדוגמא דפדפן FF לא תומך במתן padding לאלמנט מסוג </td>. לכן ברגע שנגדיר display: table-cell גם עליו FF לא יקבל padding. וכן הלאה.

למה זה טוב אם כן? רק ממש כשמבנה כלשהו אמור לקבל מבנה טבלאי. אחרת ממש כדאי להמנע…

display: flex, grid

שתי הגדרות מורכבות מאד. אכתוב עליהן בעז"ה בפוסטים נפרדים.

כתוב/כתבי תגובה