Household Coding: Learning the Box Model

In teaching, I often explain nebulous concepts by using metaphors of random inanimate objects. Coffee creamers, picture frames, housing construction, etc. I’ve found that it takes an often-confusing concept and makes it more relatable to understand. So I’m starting a new blog series called Household Coding. In it, I will share small animations and graphics of these metaphors to explain coding concepts. Here is the first installation, Learning the Box Model.

One of the most basic concepts of CSS that my students often struggle with when first learning the language is the box model. As explained by the MDN,

In a document, each element is represented as a rectangular box. Determining the size, properties — like its color, background, borders aspect — and the position of these boxes is the goal of the rendering engine.

In CSS, each of these rectangular boxes is described using the standard box model. This model describes the space of the content taken by an element. Each box has four edges: the margin edgeborder edgepadding edge, and content edge.

For the past two cohorts, I have used an analogy of picture frames and an art gallery to visually represent the box model. So here is a little animated movie I created using Sketch and Principle to explain the box model.