CSS for Beginners - The Box Model Explained

Coding Docs CSS

Every HTML element on a webpage can be considered as a box and in web development, we use CSS to style and align them. Understanding the concept of these boxes is important to improve your CSS skills.

An element (box) consists of a content field and additional properties as paddings, borders, and margins. This structure is called the CSS Box Model and in this post, you’re going to learn how the Box Model works.


Structure of the Box Model

The Box Model

From the box model’s view of perspective, this is how an element in a webpage looks, boxes inside boxes. According to the box model, an element consists of 4 parts:

  • Content (element itself)
  • Padding (inner space)
  • Border
  • Margin (outer space)

and each box has 4 sides: top, bottom, left and right. Therefore, we can apply paddings, borders and margins each of the sides separately or all together:

padding: 10px;        // adds 10px to all sides
padding-right:
10px; // adds 10px only to right

Now let’s see them in more detail…

Content:

The content area is the element itself without any paddings, borders or margins. Considering that we have a <p> tag with some text inside:

<p class="article">Text</p>
<style>
.article {
background: lightblue;
}
</style>
The Content Area of the <p> tag (light-blue background)

The light-blue field is the content area of the element. Since the <p> tag is a block-level element, it takes the full width of the page.

The element also has a width and a height property. These properties adjust themselves automatically based on the size of the content unless we define them:

.article {
background: lightblue;
width: 100px;
height: 100px;
}
width & height are here 100px

However, if the content gets too large, giving a fixed height to the element causes an overflow problem:

<p class="article">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

Tip: It’s better not to give a height property to elements, but if we have to then we can fix this issue with the Overflow Property.

Padding Area:

The next part of the box model after the content is the Padding Area. If you view the picture at the beginning of this post again, you will see that the padding area is the field between the content and the borders of the element.

We give paddings to elements to create some empty space between the content and the borders.

Element without paddings:

Element with 20px of paddings:

.article {
background: lightblue;
width: 100px;
height: 100px;
padding: 20px;
}
Padding adds space between the content & borders

Re-Calculation of Width & Height

Here is the part where people get confused. I gave 100px to width & height of the element but, after declaring the padding property, the box got bigger.

So when we inspect the element, we see that the content still has 100px of width & height, but its actual width & height is 140px:

Screenshot from Firefox Dev Tools

This happens because according to the box model, not only the content but also paddings & borders are count as the part of the element. So that’s why the correct calculation should be like this:

actual width = border-left + padding-left + width +padding-right + border-right

actual height = border-top + padding-top + height +padding-bottom + border-bottom

or

You can use another CSS property box-sizing instead. Box-sizing gives an option to omit paddings & borders for the calculation. ( I also recommend to use it.)

Borders:

As we know from the real-world, borders are the ending lines of something / somewhere. It’s the same with the box model. Borders are the ending lines of an element.

The common usage of the border property is with a shorthand:

.article {
border: 3px solid red;
}

which includes the following properties at once:

  • border-width
  • border-style (required)
  • border-color

It is optional to define border-width & border-color properties, but they don’t work without a border-style.

See here for more information about borders.

Margin Area:

The Margin Area is the last and the outer space of the box model. We give margins to create space between elements:

<p class="article">Text</p>
<p class="article">Another Text</p>
<p class="article">Final Text</p>
<style>
.article {
background: lightblue;
margin-bottom: 20px;
}
</style>

and how they look without margins:


The Box Model is one of the essential parts of CSS and developers must learn it sooner or later. I hope after reading my article, you now have a better understanding. If you have any questions, don’t hesitate to ask them in the comment section. 

If you want to learn more about Web Development, don’t forget to subscribe to our newsletter.

Thank you for your time & support!

Leave a Reply

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