CSS Box Model: Explained with Example
In this article, you will learn the complete CSS box model with examples. When we talk about the box model, it takes us to web design and layout.
Basically, the CSS box model is a box that wraps around every HTML element. This box model consists of content, paddings, borders and margins.
The CSS Box model makes our work a lot easier when we use CSS properties to apply some styles to HTML elements. We consider all the HTML elements as boxes. By keeping this technique in mind, we can design and customize the layout of HTML elements more easily.
Now let’s see further.
CSS Box Model
What is the CSS Box Model?
In simple words, the CSS box model is a container that consists of content, padding, borders and margins.
If we draw a structure of the box model then it will look like this as in the image below:
This image clearly explaining that what the CSS box model is. Now let’s see the parts of the box model that you saw in the image.
- Content: It is the content of the box like text, images and videos that you add through HTML.
- Padding: The padding is the area or space in between border and content on all four sides. It is transparent which mean no colour.
- Border: The border comes around the padding. You can apply different colours and styles to borders. For more information about CSS borders, check this complete guide about how to use CSS border property.
- Margin: The margin comes around the border on all four sides. It is also transparent.
CSS Box Model Example
Let’s suppose, we created three boxes using div tags and give three classes .box1, .box2 and .box3 in HTML. Like this below.
Without adding any CSS, it will look like this in your browser.
Now we will add some CSS.
Code Explanation: I used same properties for all three boxes.
- width property for defining the width of a box.
- background-color property for applying the background colour of a box.
- padding property for adding some space around the text.
- border property for borders.
Note: Paddings, Borders, and Margins will apply on all four sides. Because I am using shorthand property here, one value will apply to all four sides.
Now it will display like this in browser.
Now let me explain that what is happening. See the below image it will explain everything. If we draw the box model of above boxes then it will look like this below.
Explanation: As you can see there is a content box. The content box has a padding of 40 pixels all around its four sides. And the border of 1 pixel and 10 pixels of margin around its sides. This is all about the box model.
I hope this guide will be helpful for you. If yes then leave a comment below. And if you have any questions then you can ask in the comment section below.
Don’t forget to subscribe our newsletter to get new articles in your inbox.