The CSS Box Model
Tags: css, html
Published: 2020-03-31 17:05:14

---
title: The CSS Box Model
published: true
description: A walk through the CSS box model, its different parts and how the interact with each other.
tags: css,html
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/4qk9e81ahz7ad99kos6h.png
---

When displaying a document on a browser, the elements are displayed as rectangular containers according to the [standard CSS box model](https://drafts.csswg.org/css-box-3/#box-model). Each box will consist of a content area and, optionally, padding, border, and margin:

- Content: the area where the actual "content" goes.
- Border: the line that wraps the content.
- Padding: the space between the content area and the inner edge of the border.
- Margin: the space between the element (considered from the outer edge of the border) and its surrounding elements.

<figure>
![The Box Model: margin, border, padding, and content](https://dev-to-uploads.s3.amazonaws.com/i/jm7sfyu6z3p2brmjdfcg.png)
<figcaption>The Box Model: margin, border, padding, and content.</figcaption>
</figure>

We can use CSS properties to style each of the parts:

- For the content, we can specify `width` and `height`.
- The paddings thickness can be specified with the `padding` shorthand or with each separate side property (e.g. `padding-top`, `padding-right`, etc.)
- The border can take many properties, but the most important for this case would be thickness (`border-width`), type (`border-style`), and color (`border-color`). A shorthand version can be used, as well as individual side property.
- The margin works similarly to the padding, and its thickness can be specified with the `margin` shorthand or with each separate side property (e.g. `margin-top`, `margin-bottom`, etc.)

As displayed in the figure above, each of these parts of the box model generates an area of its own, so we have one for the content, padding, border, and margin. Let's see them one by one.

## The boxes

Although the content-box and the border-box may get most of the attention (_thanks_ `box-sizing`!), all of the areas/boxes in the box model have something that makes them particular and important. 

### Content box

The content area (or content box) is the place where the actual content of the element goes. **By default, the sizes apply to the content area**: when width and height are specified for an element, they do not include padding, border, or margin.

The CSS property `box-sizing` allows us to specify a different way of calculating the sizes. If we specify `border-box`, then the size will represent the total of content, padding, and border added together.

![Content Box description](https://dev-to-uploads.s3.amazonaws.com/i/iewmnrl3axm2wijk9i1k.png)

### Padding box

The padding area (or padding box) extends between the outer edges of the padding, including the content area. If the padding is zero, the padding and the content box will be the same.

It is important because **the background will be applied using the padding-box as a reference**. For example, when we specify `top left` as the position of the background (default value), we are referring to the `top left` of the padding-box, not the content or the border boxes.

![Padding Box Description](https://dev-to-uploads.s3.amazonaws.com/i/gv58xvq5xagpflh14ypd.png)

### Border box

The border area (or border box) extends between the outer edges of the border, including the padding and the content. If the border is zero, the border and padding boxes will be the same.

Apart from having the possibility of specifying the size of the element based on the border-box instead of the content-box, **the border-box is essential because it is used as the starting point for other properties** (see [beyond the box model](#beyond-the-box-model) below).

![Border Box Description](https://dev-to-uploads.s3.amazonaws.com/i/jr58bqxz7yb9mriadfjp.png)

### Margin box

The margin area (or margin box) extends between the outer edges of the element's margins, including all margin, border, padding, and content. If the margin is zero, the margin and border boxes will be the same.

The outer edge of the margin box –or simply "outer edge" because it is the edge the element and the whole box– is important because it is used as the positioning reference (e.g. the `top` value refers to the position of the top outer edge).

![Margin Box Description](https://dev-to-uploads.s3.amazonaws.com/i/gvloplntsnb7b1oadsq2.png)


## Beyond the box model

In addition to `margin`, `padding`, and `border`, there are a couple of CSS properties that, in my opinion, should be included when talking about the box model: `box-shadow` and `outline`.

**Neither of them occupies space within the box**, but they are visible, they are boxes, and their positioning/size highly depend on the specific areas from the box-model.

### Outline

Outlines are very similar to borders –the syntax is the same–, but there are a couple of differences: they don't occupy space and they are squared –(even when they don't have to according to the [specs](https://drafts.csswg.org/css-ui-3/#outline).)

The outline is placed starting in the border edge (the outer edge of the border) and towards the outside. Their position can be adjusted by using the `outline-offset` property. so they could be on the outside or the inside.

<figure>
![Different positions of the outline using outline-offset: value = 0 means the outline will be right outside the border edge, touching it; value > 0 means the outline will be outside of the border ](https://dev-to-uploads.s3.amazonaws.com/i/rwt4dti1ulwpslwrukaf.png)
<figcaption>Outline (dashed blue) position relative to the border (solid black) depending on the `outline-offset` value</figcaption>
</figure>

Browsers use the outline to highlight the focused element. This is interesting because, even when the outline doesn't occupy any space, it is displayed on top of the box model elements (even the content!). So be cautious when using `outline-offset`.

### Box-shadow

The box-shadow property adds a shadow effect to an element. This shadow is a box in itself –although it doesn't occupy any space–, and contrary to the outline's behavior, it goes under the content/elements in the box model instead of on top.

The visualization of the box-shadow is also interesting because it will start from the border, but which edge of the border depends on the type of shadow: drop shadows (default) grow from the border edge (the outer edge of the border), while inset shadows grow from the padding edge (the inner edge of the border).