The CSS Box Model Tutorial
Tags: css, webdev, beginners, tutorial
Published: 2022-07-11 12:38:29

In this tutorial, we’ll be learning about the CSS Box Model!

Understanding the box model is a key concept to grasp in CSS. And for many, learning the box model provides a real moment of clarity — where CSS layouts start to really make sense!

The thing to remember is that _each element in web design, is a rectangular box_.

## The Box Model
When rendering a document, the browser see’s each element as a rectangular box — this is the box model. The CSS determines the size of the box based on a few properties:

- Content
- Padding
- Border
- Margin

Perhaps the best way to visualize this, is to open your browser DevTools and see how it is displayed:
![CSS Box Model](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/080ewdcdopabr4b4b8w9.png)
Here you can examine the box model of any element on a page! Check this out by right-clicking an element & selecting _Inspect_, then see the layout panel in DevTools.

The area in light blue is the content box, around it we have the padding, then the border and finally the margin. This is our box! Within it we have:

**Content:** This is the area where your content is displayed, which can be sized using _width & height_ properties. It’s typically where text and images appear.

**Padding:** The padding sits around the content area, its transparent and its size is set using _padding_ properties.

**Border:** The border box wraps around the padding (if any) and content. Its size and style are set using _border_ properties.

**Margin:** The margin clears an area outside the border, wrapping the content, padding and border with white-space between this box and other elements. Its size is set using _margin_ properties.

With the box model we can also add a border around elements, and define space between elements.

Typically when you set a width (or height) on the element, those rules will apply to the **content area**. Any padding, border, or margins are added to that width and height to give the total size of the box.

## Calculating the box size
Let’s use an example to see how we calculate the size of our box:
![CSS Box Model](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pk7cesncd1us0lv9tp1b.png)
With the above CSS, our box width is actually 354px (300 + 25 + 25 + 2+ 2), and its height is 254px (200 + 25 + 25 + 2+ 2). As the padding and border are added to the width used for the content area.

The margin is **not** counted towards the size of the box. It affects the space on the page, but only the space outside the box. The box’s area stops at the border — it does not extend into the margin.

Note: If padding or borders are undeclared, they are either zero (if you’ve used a css reset or framework) or the browser default value (which is probably not zero).

## CSS Box Sizing
The CSS `box-sizing` property lets us include the padding and border in our box size calculation — that is the total box width & height.

### Without box-sizing
As we’ve seen, the width and height of an element is calculated like so:

_width + padding + border = actual element width
height + padding + border = actual element height_

As a result, when you set the width or height of an element, it often appears bigger than you might’ve thought (as the element’s border and padding are added to the specified width & height).

In the below example, the two elements end up being different sizes, as _item2_ has padding specified:
![CSS Without Box Sizing](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5kamxw1qt6p3s4ubwcpz.png)
The box-sizing property solves this problem!

### Using box-sizing
With `box-sizing` CSS includes the padding and border in the element's total width and height.

Set `box-sizing: border-box;` on an element, like so:
![CSS Box Sizing](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/44gxpfi8p5iwck42g37q.png)
Now it’ll make much more sense when we lay out elements. As they’re sized in a much more intuitive way — with the padding and border included in the total height/width.

Many developers want this to apply to all elements on their pages. A simple way to ensure this is to implement the following CSS rule:
![CSS Rule](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kqsfqzcs213a4gf8ldco.png)
And there you go! We’ve looked at the Box Model & how its defined, as well as how to calculate the box size on our elements & how to apply the `box-sizing` property to handle our sizing more intuitively.

In the next tutorial, we’ll be looking at Margins, Padding & Borders in more detail. Be sure to check this out to build upon your knowledge of the box model!

## Conclusion
If you liked this blog post, follow me on [Twitter](https://twitter.com/RembertDesigns) where I post daily about Tech related things!
![Buy Me A Coffee](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ijinng8k7bf23v0o6gkj.png) If you enjoyed this article & would like to leave a tip — click [here](https://www.buymeacoffee.com/rembertdesigns)

### 🌎 Let's Connect

- [Portfolio](https://www.rembertdesigns.co/)

- [Twitter](https://twitter.com/RembertDesigns)

- [Github](https://github.com/rembertdesigns)

- [Codepen](https://codepen.io/rembertdesigns)

- [LinkedIn](https://www.linkedin.com/in/rrembert/)