What Is the Box Model? A Very Simple Explanation

(This article was originally published in How To Debug CSS)

The Box Model

Every element on a webpage, as interpreted by CSS, is a box. We can shrink these boxes, represent them as links, headers, forms, whaterver we want.

We can specify the exact kind of box we want with element “tags,” but when it all comes down to it, all elements are just different methods of representing a box.

But what is a box in CSS? And how can we use and manipulate it?

The Structure of a CSS Box (the Box Model)

While we might normally think of a box as a simple four-sided square, in CSS they are a little more interesting.

In CSS, a box can be built out of four layers (three of which are inside it).

These are: the content of the box, the padding of the box, the border of the box, and the margin of the box.

We can see what a typical box (representing a <div> element) looks like and is structured, here:

The above structure represents the box model, which just means the structure of an HTML element’s box.

Let’s briefly walk through the parts of a box, from the inside out:

We’ll be using the same <div> that we’ve demonstrated in the example drawing, within our CSS examples below.

Here’s how the real <div> box looks with all its layers by default:

HTML

<div>
  This is a box.
</div>

CSS

div {
    background-colour: lightblue;
}

Which gives us this:

If we use the Firefox dev tools and inspect element on this <div>, then  navigate to the “box model” pane on the right, we can see how our <div> box looks right now, according to the web browser:

The content area is the one with the numbers (666 – the default full width of the page/viewport – and 19.2 – the height of the text we’ve set)

(code for this here: https://codepen.io/planflowdev/pen/wvoEVvg)

As you can see, it looks as plain as it does because there are no values applied to the other layers of the box (padding, border and margin).

They are all 0.

All we have is our text: “This is a box,” which is within the content area of our box.

Let’s take a closer look at this content area.

The Content

The content area is the innermost part of the box.

It usually holds content such as text, images, video, another HTML element or any other acceptable HTML5 content type.

The height: and width: properties, when set on an element, are usually applied on this content area specifically (apart from some cases which we’ll see later).

Let’s add 50px of height: and 100px of width: to our content area to test this out.

HTML

<div>
  This is a box.
</div>

CSS

div {
    height: 50px;
    width: 100px;
    background-colour: lightblue;
}

Which gives us this:

Our browser sees it like this:

(code for this here: https://codepen.io/planflowdev/pen/rNWQaRP)

As you can see, our content area now has a height of 50px and a width of 100px, as we’ve specified.

But what happens to our box when we add some padding?

The Padding

Padding creates a space between the content and border sections of the box. It applies to the internal spacing within the box. Because after the content, padding and border, there is the margin, which is part of the box model, but is, technically, outside the box.

Our padding can be applied to our <div> element’s box like this:

HTML

<div>
  This is a box.
</div>

CSS

div {
    height: 50px;
    width: 100px;
    padding: 20px;
    background-colour: lightblue;
}

Which gives us this:

This looks like we’ve just added more height and width to the content area, but in fact, 20px has been added all around in the padding layer above the content area.

We can get a better view of what has happened from our browser’s box model pane.

Our browser sees it like this:

(code for this here: https://codepen.io/planflowdev/pen/dyOqxWP)

Here you can see the 20px added all around in the padding layer, with the remaining border and margin still remaining at 0.

Now we can move on the to the next layer in the box model, the last one that is actually within the box itself. Or shall we say, around it.

The border.

The Border

The border comes just after the padding. It is the final layer of the actual box that gives you the ability to add a variety of border styles to the edge of your box..

It can be applied to an elements box like this:

HTML

<div>
This is a box.
</div>

CSS

div {
    height: 50px;
    width: 100px;
    padding: 20px;
    border: 2px solid black;
    background-colour: lightblue;
}

Which gives us this:

Our browser sees it like this:

(code for this here: https://codepen.io/planflowdev/pen/YzpJpJe)

The Margin

The margin creates a gap between your box (content, padding and border) and the other elements or page edges around it. While still a part of the overall box model, unlike the padding, it only applies outside of the actual box structure, as a way to create space around the box.

A margin can be applied to a an elements box like this:

HTML

<div>
  This is a box.
</div>

CSS

div {
    height: 50px;
    width: 100px;
    padding: 20px;
    border: 2px solid black;
    margin-left: 20px;
    background-colour: lightblue;
}

Which gives us this:

Our browser sees it like this:

(code for this here: https://codepen.io/planflowdev/pen/QWGZGZX)

As you can see we’ve added a margin of 20px to the left of our box. And as you can also see, this has no effect on the inner part of our box.

Despite this, margin is still a part of the box model, because the margin that gets applied in CSS is made in reference to an inner box, working outward.

So when I apply my margin-left property as I did above, I am saying, “Starting from the border of my box, create a margin to the left of it of 20px.”

Look at margins as the borderless fields that can be created outside the inner box, but that are still a part of it.

Margins are most often applied in order to create gaps between elements.