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

display: none

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

display: block

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

מאפיינים:

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

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

display: inline

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

מאפיינים:

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

<a><span>ועוד

display: inline-block

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

מאפיינים:

הערה אחת

בגלל שהאלמנטים ב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

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

כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *