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 thatmargin
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
Top comments (0)