CSS: Learning box model with analogies

Introduction

If you're studying CSS, you may have already encountered the term box model. If not, don't worry; we'll address this topic in this article.

Every element in a web page is a rectangle called box; that's where the box model name came from. Understanding how this model works is the basis for creating more complex layouts with CSS or aligning the items correctly.

When inspecting an element (clicking with the right button or opening the DevTools with Ctrl+Shift+C or F12, depending on your browser) at the Computed tab, you'll probably see something like this:

In the next section, we'll see what each part of this image means in detail.

The Box model's basic structure

Inspired by this article [1], we will use the construction of a house on a lot as our example to illustrate the basic structure of the box model.

The parts that make up the structure are:

Content

Content refers to the most central part of Fig.1 in blue and is related to the content within an HTML tag, such as text in a paragraph (<p>).

The content is composed of two properties, width and height.

In our example, the content will be the little house below (Fig.2) (if you inspect the image of the house, you will see that the measurements are the same as Fig.1). The dimensions of the house are 81px wide and 93px tall.

The content needs to be inside an HTML structure, so we will place our little house inside a lot to represent this structure:

Padding

The green part of Fig.1 is the padding property, which creates space around the content.

The padding is demonstrated by the land part, where the garden will be, for example:

Border

Next, we have the border property, which is responsible for delimiting our content and is represented by yellow in Fig.1. The border is the last property of our element that can be seen.

The border can be represented as the wall or, in our case, the fence of the house:

Margin

Finally, we have the margin property in orange (Fig.1), which includes an empty area around our element. As can be seen in the image:

In this case, we reduced the padding so that the margin could be represented in the image.

The box-sizing property

Now that we know the structure of the box model, we can address the box-sizing property. This property allows us to tell the browser how it should calculate the height and width of the element. We only have 2 possible values:

content-box

This is the default value, where the element's height and width include only the content. Therefore, if we have content with a height and width of 100px, plus 10px of padding, 5px of border and 5 of margin, we will see that the size of our element changed from 100px to 130px:

See the code here:

This occurs because the height and width properties are only applied to the content (the blue part of Fig.1, remember?). However, we also added padding, border and margin:

100px (height/width) + 2 * 10px (padding) + 2 * 5px (border) + 2 * 5px (margin) = 140px

Attention! ⚠️

Huh?! 🤔

The image shows the element with 130px and not 140px!
Exactly! Remember that margin is an external property of the element (or empty space around it) and should not be added to its height and width.

We can think that the box-sizing property, with the value content-box, will grow our element as we add more "layers."
To explain, I will use another analogy: Imagine a balloon, like those at a children's party, with sweets inside (it's like the Brazilian version of piñata).

The sweets will be our content, with a fixed height and width. To make it possible to pop the balloon, we will add padding (air) inside the balloon. The balloon itself is the border and the margin is all the space around the balloon:

Did you see how our element grew as we added more properties or if we added more air (padding) to the balloon?

Another example of a content-box using an analogy is a bag of popcorn in the microwave, where we initially have the content (corn), the border (paper bag), and the margin (internal space of the microwave). However, padding (air/steam inside the bag) is slowly added when heating.

border-box

The other possible value for the box-sizing property is border-box. It is handy when you want to be sure of the space your element will occupy on the page; instead of limiting the height and width to just the content, it uses the entire element (content + padding + border). This helps create responsive layouts, as we guarantee that the elements have the exact size defined even using relative measurements (%, em, rem etc.).

Using the same example as Fig.7, but adding the box-sizing: border-box; property, we will have a final element with 100px height and width as previously defined.

The difference is that our content has now been reduced to 70px in height and width so that it does not exceed 100px.

See the code here:

In this case, we must think of something in which the final measurements cannot exceed a certain size. For this, we will use a cooler as the maximum size; therefore, the box will represent the border of our element:

The content will be a drink that we want to chill, and the ice is the padding:

Note that the more ice we add, the smaller the drink we can chill. As we cannot have content with negative measurements, the smallest possible size will be 0px. However, assuming that our box is 100px height by 120px width, and we define a padding of 60px, we will have all 120px of ice both horizontally and vertically; that is, the ice will overflow to the cooler.

The same happens with our HTML element:

See the code here:

Conclusion

Now that you know the basic structure of the Box Model and the box-sizing property, it will be easier to understand how the elements behave on your web page and know when to use each value ​​(content-box and border-box). Inspecting the elements of the websites you use daily, you will see that the majority use border-box for their elements, as this property has made responsive design much easier. :)

Congratulations on getting this far!

Do you have any questions or suggestions? Feel free to leave a comment or, if you prefer, send a private message on LinkedIn.

Note ❗🚫

I made all images in this article; please do not use them without due consent/credit.
The free ready-made assets I used are in the references, and use for non-commercial projects is permitted.

References

[1] The CSS Box Model Explained by Living in a Boring Suburban Neighborhood
[2] MDN Web Docs - The box model
[3] MDN Web Docs - Introduction to the CSS basic box model
[4] MDN Web Docs - box-sizing
[5] W3Schools - CSS Box Model
[6] W3Schools - CSS Box Sizing
[7] The Odin Project - Foundations Course - The Box Model
[8] Learn CSS BOX MODEL - With Real World Examples
[9] Learn CSS Box Model in 8 minutes
[10] box-sizing: border-box (EASY!)
[11] Assets used in the images for the Box Model examples
[12] Assets - Beer mug