Home » Learn Code » CSS3 » CSS Box Model: Explained with Example

CSS Box Model: Explained with Example

  • CSS3
  • 4 min read
CSS box model

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:

css box model

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.

HTML Code

html code

Without adding any CSS, it will look like this in your browser.

CSS box model code display in browser

Now we will add some CSS.

CSS Code

css code for box model example

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.

browser display for example

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.

css box example

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.

Leave a Reply

Your email address will not be published. Required fields are marked *