פתחתם DevTools פעם, הסתכלתם על אלמנט, וראיתם שה-width שהגדרתם הוא 300px, אבל האלמנט תופס 340px על המסך? זה לא באג. זה Box Model. ו-80% מהבאגים של CSS שמפתחים מתחילים נתקלים בהם נובעים מאי-הבנה של כלל אחד פשוט: כל אלמנט ב-HTML הוא קופסה, ולקופסה הזו יש ארבע שכבות. אם לא מבינים אותן, CSS מרגיש כמו ניחוש.
ב-2014, חבר'ה מ-Facebook פרסמו ניתוח של ה-CSS שלהם: מעל 85% מהבאגים שדווחו במחלקת ה-UI היו קשורים ל-Box Model - בעיות spacing שלא מסתדרות, אלמנטים שחורגים מהגבולות שלהם, margins שלא מתנהגים כמו שציפו. הפתרון לא היה לכתוב CSS אחר. הפתרון היה להבין את הקופסה.