CSS for Beginners

The box model explained

Every HTML element on a webpage can be considered 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 such 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

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 four parts:

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

And each box has four sides: top, bottom, left, and right. Therefore, we can apply paddings, borders, and margins on 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.


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;

The light-blue field is the content area of the element. As 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;

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, 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 padding to elements to create some empty space between the content and the borders.

Element without padding:

Element with 20px of padding:

.article {
background: lightblue;
width: 100px;
height: 100px;
padding: 20px;

Recalculation of Width and Height

Here is the part where people get confused. I gave 100px to width and 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 and height, but its actual width and height is 140px:

This happens because, according to the box model, not only the content but also the padding and borders are counted as 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


You can use another CSS property, box-sizing, instead. Box-sizing gives you the option to omit padding and borders for the calculation. (I also recommend you use it.)


As we know from the real world, borders are the ending lines of something or 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 and 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 use 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;

This is what they look like without margins:


The box model is one of the essential parts of CSS and developers must learn it sooner or later.

I hope that, after reading my article, you have a better understanding. If you have any questions, don’t hesitate to ask.

Thank you for reading.