ההגדרה display היא הגדרה חשובה ביותר בCSS, ויש להבין אותה בצורה ברורה ומדוייקת כי היא משפיעה על הגדרות נוספות כמו margin ודברים נוספים.
display מקבלת כמה ערכים אפשריים:
display: none
נתחיל מהפשוטה ביותר – האלמנט כאילו לא קיים. הוא לא נראה, הוא לא תופס מקום, פוקוס לא מגיע אליו.
נשתמש בdisplay: none לדוגמה כאשר אנחנו צריכים שאלמנטים מסויימים יוצגו רק במצב מובייל או רק במצב דסקטופ. ברזולוציות שבהן האלמנט לא אמור להופיע על המסך – נגדיר לו display: none;
אין אלמנטים שnone היא הגדרת ברירת המחדל שלהם.
display: block
המשמעות שלו היא כשמו: בלוק. בהיעדר הגדרות ייעודיות יורד שורה אחרי אלמנטים קודמים וגורם לאלמנטים אחרים לרדת שורה.
מאפיינים של display: block
- כברירת מחדל רוחבו הוא כרוחב האלמנט שמכיל אותו.
- מסוגל לקבל margin/ padding/ width/ heigh.
- אין משמעות לvertical-align
משמש כברירת מחדל עבור אחוז נכבד מהאלמנטים של HTML, ביניהם div, p ועוד.
אם רוצים שאלמנט בלוק יקבל את רוחב התוכן שלו – אפשר לתת לו width: fit-content. אבל עדיין הוא יתפוס שורה משל עצמו.
אם רוצים ליישר למרכז אלמנט בלוק – מוסיפים לו: margin: auto;
display: inline
ההתנהגות שלו היא כמו של אות במילה. לכן כמה אלמנטים בהגדרה זו יעמדו אחד ליד השני ליד השלישי וכו', ובהמשך במידת הצורך יגלשו לשורה הבאה, בדיוק כאילו זה משפט אחד ארוך.
מאפיינים של display: inline
- רוחבו הוא הרוחב של התוכן שלו.
- לא מסוגל לקבל הגדרות של בלוק כמו width, height, margin, ובחלק מהדפדפנים padding.
משמש כברירת מחדל עבור מעט אלמנטים של HTML. בעיקר <a>, <span>.
display: inline-block
השילוב המקסים בין block לבין inline. הוא מתנהג כמו מילים במשפט, ועד לתמיכה המלאה של דפדפנים בflex בשנים האחרונות – display: inline-block היה יד ימין של כל בונה אתרים.
בדומה לinline האלמנטים עומדים אחד ליד השני ומסוגלים לקבל vertical-align של אחד ביחס לשני,
ומצד שני, בדומה לblock הוא מסוגל לקבל הגדרות של רוחב, גובה ושוליים.
כמו כן משפיעה עליו הגדרת text-align של האב שלו, כך שאם לאב יש text-align: center – האלמנטים בעלי הגדרת הinline-block שבתוכו יתמרכזו לאמצע.
מאפיינים של display: inline-block
- כברירת מחדל רוחבו הוא הרוחב של התוכן שלו
- מסוגל לקבל הגדרת רוחב/גובה/שוליים ומרחקים
- עובד טוב עם vertical-align.
הערה אחת
בגלל שהאלמנטים בinline-block משמשים כמו מילים במשפט, נוסף ביניהם הרווח שנוסף אוטומטית בין מילים במשפט. לכן ניתן לראות לפעמים ששתי אלמנטים בעלי inline-block, שהרוחבים שלהם משלימים ל100 (למשל 50% לכל אחד), ואין להם margin, ובכל זאת השני נופל שורה, זה בגלל הרווח האמור.
איך מתגברים על זה? פשוט מאד. עד כמו שזה יישמע מוזר, הוספת ההגדרה font-size: 0 לאלמנט האב שלהם יפתור את הבעיה.
איך זה עובד?
מאחר והרווח בין מילים במשפט תלוי בגודל הפונט של האותיות – ברגע שגודל התווים (font-size) יהיה 0 – אוטומטית גם הרווחים בין המילים יהיה 0, וכך הרווח בין האלמנטים גם הוא יהיה 0.
display: flex, grid
מורכבים יותר, ויקבלו פרקים משלהם בהמשך בעז"ה.