אחד הדברים שתמיד הפתיעו אותי ב CSS הוא ההתנהגות המוזרה של inline-block. למעשה הערך inline-block של מאפיין display יכול להגיד שני דברים קצת שונים לפי תוכן האלמנט. בואו נראה דרך דוגמא.

1. מה קורה פה

התוכנית הבאה תצייר X בריבוע שתלחצו עליו, אבל גם תקלקל את כל רשת הריבועים באותו הזמן:

2. הסיפור האמיתי

השאלה איך לסדר את האלמנטים בשורה מושפעת מערך ה vertical-align שלהם. הערך ההתחלתי של מאפיין זה הוא baseline והנה המשמעות שלו מתוך התיעוד:

Align the baseline of the box with the baseline of the parent box. If the box does not have a baseline, align the bottom margin edge with the parent's baseline.

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

The baseline of an 'inline-block' is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its 'overflow' property has a computed value other than 'visible', in which case the baseline is the bottom margin edge.

או בעברית: אם יש טקסט בתיבה ה baseline יהיה זהה לשורת הטקסט האחרונה. אם אין טקסט בתיבה או שערך המאפיין overflow שונה מ visible אז baseline לא מוגדר.

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

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

אבל אל דאגה, CSS מציע שתי דלתות יציאה המופיעות באותו התיעוד: אפשרות אחת היא להוסיף ערך שאינו ברירת מחדל למאפיין overflow. שימו overflow: hidden על הריבועים ואז גם כשיהיה בהם טקסט הוא לא יחשב לצורך חישוב baseline. אפשרות שניה היא להעיף את baseline ולבחור ערך אחר ל vertical align, למשל הוספת המאפיין vertical-align: top להגדרת העיצוב של הריבוע.

מוזמנים לנסות בעצמכם בתיבת הקוד שהוצגה למעלה.