The box model and box sizing – Piccalilli

March 22, 2024

To open up this CSS Fundamentals series, we’re looking at one of those most important aspects of CSS to understand: how the box model is affected by box sizing.If there’s ever one really important thing to remember when writing CSS: it’s that every element is a box. Regardless of how an element looks visually, it’s still a box.

Source: The box model and box sizing – Piccalilli

CSS has come a. very long way in the 28 years I’ve been working with it. Back in the mid 90s you cold learn it in a few days, and the biggest challenges were without doubt the very inconsistent implementation between major browsers (back then that was Internet Explorer 3, then 4, and Netscape 4). Netscape’s then dominant browser had implemented its own style sheet language, JSSS (JavaScript Style Sheets), and grafted CSS syntax on top of that engine. While there’s not 100% conformance between browsers on CSS implementation, it’s drastically improved.

There was another challenge that caused a lot of developers headaches then, and it somewhat persists, particularly for those new to CSS. The box model and how boxes were sized. Andy Bell has a new series on the fundamentals of CSS, starting with the box model.

I really recommend folks go and focus on some of these foundations from time to time.