הדוגמא הבאה מציגה 8 ריבועים בשני טורים, כל ריבוע מיוצג על ידי div בעל תצוגת inline-block. את הרווח בין שני הטורים הצלחתי לצמצם אבל מה גורם לרווח בין השורות?

(מוזמנים ללחוץ Edit On Codepen ולנסות לצמצם את הרווח בעצמכם לפני שממשיכים לקרוא את הפתרון)

1. פתרון

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

והקוד:

.container div {
  vertical-align:top;

  width:100px;
  height:20px;
  background:lightblue;
  display:inline-block;
  border: 1px solid blue;
}

.container {
  width:210px; 
}