What Is The Box Model? A Very Simple Explanation

Tapha

Published: 2021-08-19

box model diagrambox model examplewhat are the four areas of the box modelwhat is the box model

(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 off of 4 layers (3 inside).

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 below CSS examples.

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) & 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 of 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 on 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 apply gaps outside of 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 20px to the left of our box. And as we 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 from an inner box, outwards.

    So when I apply my ‘margin-left’ property as is done above, I am saying, starting from the border of my box, create a margin to the left of it, of 20px.

    See margin’s as the borderless ’fields’ that can be created outside of the inner box, but that are still a part of it.

    Margin’s are most often applied in order to create gaps between elements.

    Get exclusive notification of new posts like this one as soon as they are published. No spam!
    Subscribe below!

    --

    Check out the easiest way to plan your website or mobile app. Try PlanFlow for free.