Photo by Dan Cristian Pădureț on Unsplash
A Simple Guide to the CSS Box Model
Arguably the most important foundational concept in CSS, the box model is the basis of layouts and sizing in CSS.
ME: "Have you heard about the CSS box model?"
BEGINNER: "Yes, I have."
ME: "What can you tell me about it? Explain it to me."
BEGINNER: "(O_O)..."
As an instructor, I often find myself in situations such as the above.
A beginner is learning or has just learned CSS (or whichever other concept).
They have breezed through concepts and syntax, maybe watched a tutorial or two, and feel like they've got it all.
Only, they haven't.
In the process of learning, they almost always skip certain concepts or do not take enough time to truly understand them.
One such concept is the CSS box model.
Components of the Box Model
A web page is made up of units of content.
A heading
A paragraph
An image
And so on.
These units of content (we could call them elements) appear as boxes on the page. Each box has several layers, starting from the actual content area, and adding layers as required.
Content Area
In the context of the CSS box model, the content area refers to the innermost part of an HTML element. It is where the actual content, such as text, images, or other nested elements, is displayed.
The width
and height
properties specify the dimensions of the content area.
Padding
Padding is the space between the content area and the element's border.
The padding adds spacing inside the element and is used to create space between the content and the border.
For example, if you set padding: 20px;
on a <div>
element, there will be 20 pixels of space between the content and the border on all sides.
Border
The border surrounds the content and padding areas.
It defines the visual boundary of the element and separates it from neighbouring elements.
You can control the border's style, color, and thickness using CSS properties.
For example, setting border: 2px solid #ae4646;
creates a 2-pixel-wide solid border around the content and padding.
Margin
Margin is the space outside the element's border and separates it from other elements.
It is used to create spacing between elements and does not have any visual styling.
For example, if you set margin: 10px;
for a <div>
element, there will be 10 pixels of space surrounding the border of the element.
The box-sizing
Property
The box-sizing
property determines how an element's total width and height are calculated.
The default value is content-box
, which calculates dimensions based on the content area only.
Setting it to border-box
includes the padding and border in the element's dimensions.
Backgrounds and the Box Model
Backgrounds are not part of the box model per se.
However, background properties (background-color
, background-image
, etc.) can be used to style the background of an element.
Background colors and images fill the content area by default.
They also extend into the padding area.
However, border and margin areas are not affected.
What does this mean?
Let's say we have a <p>
element on our page.
<p>A paragraph on our page</p>
And we give it a red background color.
p {
background-color: red;
}
If we add a padding to the element,
p {
background-color: red;
padding: 16px;
}
The extra space created by the padding will also have a red color.
If we add a margin, however, the background color does not carry over to it.
p {
background-color: red;
padding: 16px;
margin: 16px;
}
The HTML body is the container with a light purple color.
We now notice that margins inherit the color of the container, whatever that is, and not the element itself.
How about the border? Let's add one.
p {
background-color: red;
padding: 16px;
margin: 16px;
border: 2px solid black;
}
What if we don't specify the border color?
border: 2px solid;
It will inherit the color of the content.
In this case, the content has a black color, so the border will be black even without specifying the border color.
What if the content had a different color?
p {
background-color: red;
padding: 16px;
margin: 16px;
color: green;
border: 2px solid;
}
If we do not specify the border color otherwise, the border will inherit the green color.
Margin Collapse
In certain situations, when elements are side by side, the margins of the elements can collapse into a single margin.
This can affect the spacing between elements and should be considered in layout design.
Margin collapse only affects vertical margins (top and bottom margins).
When two elements on top of each other have margins, the smaller margin collapses into the larger margin.
Let's say we have two paragraphs. I've given them backgrounds so we see them properly:
Now, giving the first paragraph a bottom margin of 5rem, the space is created:
.p1 {
margin-bottom: 5rem;
}
What if we then give the second paragraph a top margin of 3rem? The space should total 8rem, yeah?
.p2 {
margin-top: 3rem;
}
Not quite. It looks exactly the same.
Inspecting the paragraphs, we see margin collapse in action.
Obviously, both paragraphs have their assigned margins.
However, they're not stacked and added on top of each other. They have been collapsed into one: the larger of the two.
Andddd, that's margin collapse for you.
Note: As mentioned earlier, margin collapse only applies to vertical margins (top and bottom). Left and right margins do not have this behaviour.
Parting Words
The box model is the foundation of how content is laid out on a web page.
It applies to virtually every HTML element on a web page, from text and images to complex layouts created with CSS.
It provides a way to control the layout of web page elements, allowing designers and developers to specify how elements are positioned, sized, and spaced within a layout.
For front-end developers, mastery of the box model is a fundamental skill.
Understanding it will allow you to implement designs accurately and efficiently.
So go out there and show those boxes who's boss! ;D
Oh yeah, please do like, comment, and follow to get updated whenever I post an article.
Have a good one.