In this lesson, we will learn about the CSS box model. This is a very important concept in CSS. It will allow us to control the size and the position of the elements on our web pages. So let’s get started!
What is the CSS box model?#
You can think of the CSS box model as a box that wraps around every single HTML element, includint headings, paragraphs, links, images, and so on. It consists of: margins, borders, padding, and the actual content. Here’s a diagram that shows the CSS box model (image from Wikimedia).
In the image above you can see that the box model consists of four parts: the content, the padding, the border, and the margin. The content is the actual content of the element, such as text or an image.
This is super important to understand because it will allow us to control the size and the position of the elements on our web pages.
The box model properties#
The content#
The content is the actual content of the element, such as text or an image. The content is the part that you can see on the web page. It is the part that you can interact with. For example, if you click on a link, you are clicking on the content of the link. If you click on an image, you are clicking on the content of the image.
Padding#
The padding is the space between the content and the border. Ever seen a button with a border and a background color? Is the border touching the text or is there a space between the border and the text? That space is the padding.
It is important to understand that the padding is not part of the content. Its function is to let your content breathe by creating some space between the content and the border.
The padding of the box model can be controlled using the padding property. The padding property is a shorthand property for the padding-top, padding-right, padding-bottom, and padding-left properties. Here’s an example:
h1 {
padding: 10px;
}
The code above will set the padding of all four sides to 10 pixels. It is the same as writing:
h1 {
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
}
You can also set the padding of each side individually. Here’s an example:
h1 {
padding-top: 10px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 40px;
}
The code above will set the padding of the top side to 10 pixels, the right side to 20 pixels, the bottom side to 30 pixels, and the left side to 40 pixels.
Border#
The border is the line that separates the padding from the margin. You can set the width, the style, and the color of the border. You can also set the border of each side individually. For example, you can set the border of the top side to be 1 pixel wide, the right side to be 2 pixels wide, the bottom side to be 3 pixels wide, and the left side to be 4 pixels wide.
The border of the box model can be controlled using the border property. The border property is a shorthand property for the border-width, border-style, and border-color properties. Here’s an example:
h1 {
border: 1px solid black;
}
The code above will set the border width to 1 pixel, the border style to solid, and the border color to black. It is the same as writing:
h1 {
border-width: 1px;
border-style: solid; /* other values: dotted, dashed, double, groove, ridge, inset, outset */
border-color: black;
}
You can also set the border of each side individually. Here’s an example:
h1 {
border-top: 1px solid black;
border-right: 2px solid black;
border-bottom: 3px solid black;
border-left: 4px solid black;
}
The code above will set the border of the top side to 1 pixel, the right side to 2 pixels, the bottom side to 3 pixels, and the left side to 4 pixels.
Margin#
Finally, the margin is the space between the border and the next element. Do not confuse the margin with the padding. The margin is the space between the border and the next element. The padding is the space between the border and the content.
The margin of the box model can be controlled using the margin property. The margin property is a shorthand property for the margin-top, margin-right, margin-bottom, and margin-left properties. Here’s an example:
h1 {
margin: 10px;
}
Just as with the padding, the code above will set the margin of all four sides to 10 pixels. It is the same as writing:
h1 {
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;
}
And, of course, you can also set the margin of each side individually. Here’s an example:
h1 {
margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px;
}
The code above will set the margin of the top side to 10 pixels, the right side to 20 pixels, the bottom side to 30 pixels, and the left side to 40 pixels.
Sizing the box model#
In order to adjust the size of an alement, you can use the width and height properties. Like this:
h1 {
width: 200px;
height: 100px;
}
The code above will set the width of the h1 element to 200 pixels and the height to 100 pixels. But what happens if we add some padding and a border?
Will the width and height properties include the padding and the border? Or will they only include the content? This is important to understand because if we don’t know how the width and height properties work, we won’t be able to create the layout we want.
So how do you know if your width and height properties include the margin? How about the padding and the border? There is a css property for that. It’s called the box-sizing property.
The box-sizing property is used to tell the browser what the width and height properties should include. The box-sizing property can have one of two values: content-box and border-box. The default value is content-box.
This is super important to understand because it will allow us to control the size of the box model. Let’s see how it works.
The content-box value#
When the box-sizing property has the content-box value, the width and height properties include only the content area.
The border-box value#
When the box-sizing property has the border-box value, the width and height properties include the content area, the padding, and the border.
A good way to understand how the box-sizing property works is to look at the example in the Mozilla Developer Network (MDN) website. Here’s the link to the example: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing.
Set it to border-box#
In this lesson, we leaned that there are two values for the box-sizing property: content-box and border-box. However, I recommend that you always set the box-sizing property to border-box. This will make it easier to control the size of the elements. Pretty much every website you see on the internet uses the border-box value for the box-sizing property since it makes it easier to control the size of the elements.
Actually, whenever I am starting a CSS project, the first thing I do is to set the box-sizing property to border-box for every single element of the document. Here’s how I do it:
* {
box-sizing: border-box;
}
The star symbol is a wildcard. It means that the rule will apply to every single element of the document. So, the code above will set the box-sizing property to border-box for every single element of the document.
Activity#
Try updating some of the elements in your personal web page by using the box model. First, set the box-sizing property to border-box to make it easier to control the size of the elements. Then, set the width and height of some of the elements. Finally, set the padding, the border, and the margin of the elements.
Summary#
In this lesson, we learned about the box model. We learned that the box model is a model that describes how the browser lays out the elements on the web page. We learned that the box model is made up of four parts: the content, the padding, the border, and the margin.
We learned that the box model properties can be used to control the size and the position of the elements on the web page and that the width and height properties can be used to control the size of the box model. We learned that the box-sizing property can be used to tell the browser what the width and height properties should include. And we usually use the border-box value.