The Basic Guide to the CSS Box Model

The CSS Box Model is what defines how much space an element takes up on the page. The Box Model is divided up into four major parts: Content, padding, border, and margins.

Within your web browser’s element inspector, you can look at each element’s box model. In Chrome, this is found under the Elements tab in a Styles submenu.

Chrome’s CSS box model for an element shows each area and its values. In this example, I have 16 pixels of margin around the top, right, and bottom and a content area 300 pixels wide by ~288 pixels high.

If you hover your mouse over the different areas in that model, it will highlight those areas within the page.

When I place my cursor over the margin area in the box model from above, Chrome highlights how those numbers show up in the page.

Let’s dive a little deeper on what each area is.

The Content Area

This is where you’ll put text or other elements. For example, given the markup

<style>
  p {
    background-color: #ddd;
  }
</style>
<p>
  I'm a paragraph!
</p>

The text “I’m a paragraph!” is contained within the content area.

The Padding Area

This area is all around the content area — it offsets the content from the border. Let’s add some padding to our example:

<style>
  p {
    background-color: #ddd;
    padding: 15px;
  }
</style>
<p>
  I'm a paragraph!
</p>

The content area is now offset by 15 pixels on all four sides and uses the element’s background color.

The Border Area

The border outlines the padding area. Let’s add some more markup:

<style>
  p {
    background-color: #ddd;
    padding: 15px;
    border: 5px solid #333;
  }
</style>
<p>
  I'm a paragraph!
</p>

There’s now a dark line drawn around the paragraph element.

Note that the syntax for defining a border is different than padding because borders have styling options. The first parameter, 5px in this example, defines how thick the border is. The second defines the style of the border and I’ve chosen a solid style here. The final attribute defines the border’s color and I’ve picked a dark gray/black color.

Padding doesn’t have these options because it’s simply an offset — no styles and it uses whatever background color the element has defined.

The Margin Area

This is the final area that provides an offset around the outside of the element. To get a better idea of how margins work, I’ve included two elements above and below the paragraph:

<style>
  p {
    background-color: #ddd;
    padding: 15px;
    border: 5px solid #333;
    margin: 30px;
  }
</style>
<h1>Header Element</h1>
<p>
  I'm a paragraph!
</p>
<div>
  Another element below, where I might talk about how to do things or some such nonsense.
</div>

With an added margin, this paragraph element now offsets itself from elements and the sides of the screen.

Note that the element’s background color does not get used in the margin area — it’s transparent.

Determining the Size of a Box

By default, the sizing of an element is a little unintuitive. Take the following markup for example:

<style>
  p {
    background-color: #ddd;
    padding: 15px;
    width: 200px;
  }
</style>
<p>
  I'm a paragraph!
</p>

Q. How wide is the element when it’s rendered?

A. 230 pixels.

Wait, what?

The intuitive answer is 200 pixels — it’s right there in the CSS. However, when rendered, our element is slightly bigger…

The element is 230 pixels wide!

Our inspector tools are helpful in clarifying what’s going on here:

The content area is 200 pixels wide, but the 15 pixels of padding on the left and right are adding 30 pixels to the total.

By default, the width style in CSS is only applied to the content area, and applying a padding or borderstyle will appear to grow the element. I’m not sure about you, but this isn’t how I think of widths and heights at all; I compute element size based on how it looks on the page, not just the content of it. In this instance, if I wanted the rendered version of my element to be 200 pixels, I’d have to adjust the width to be 170 pixels. If I added a 1-pixel border around the edge, I’d then have to adjust the width again to account for that added size (now setting the width to be 168 pixels). What a nightmare.

The good news is that you can tell the browser how it should calculate the element’s size!

The box-sizing style

By default, an element’s box-sizing style is set to content-box and uses the less-intuitive model above. By setting box-sizing: border-box;, we can tell the browser to use the padding and border sizes in its sizing calculations. For our final example, let’s try it out:

<style>
  p {
    background-color: #ddd;
    padding: 15px;
    width: 200px;
    box-sizing: border-box;
  }
</style>
<p>
  I'm a paragraph!
</p>

The content area of our box model has adjusted itself to 170 pixels wide to accommodate the extra 30 pixels of padding on either side.

Q. When should I use padding vs. margin?

A. My rule of thumb is that if you want to offset an element’s content (be it text or more elements) from the container, use padding. If you want to offset the element from other sibling elements, use margin.

Q. I’ve heard of outline, is that part of the box model?

A. No. An element’s outline property is an accessibility feature that shows when an element is focused. It uses a similar syntax to border, but it has no impact on how the element is rendered in relation to other elements.

Q. I do not trust you. Lead me to the source of truth!

A. That’s not a question, but I recommend delving into the W3C specifications and the latest Working Draft. Or, as a happy medium, use MDN.