# CSS box-sizing: border-box

> Learn how the CSS box-sizing border-box value makes width and height include padding and border, so element sizing finally behaves the way you expect.

Author: [Flavio Copes](https://flaviocopes.com/about/) | Published: 2023-01-07 | Topics: [CSS](https://flaviocopes.com/tags/css/) | Canonical: https://flaviocopes.com/css-border-box/

By default, if you set a width (or height) on the element, that is going to be applied to the **content area**.

This does not include the padding, border, and margin, which are added on top.

For example, I set this CSS on a `p` element:

```css
p {
  width: 100px;
  padding: 10px;
  border: 10px solid black;
  margin: 10px;
}
```

and here’s what’s applied by the browser:

![Default behavior](https://flaviocopes.com/images/css-border-box/default-behavior.png)

You can change this behavior by setting the `box-sizing` property. If you set that to `border-box`, width and height calculation include the padding and the border.

Here’s what it means on the previous example:

```css
p {
  box-sizing: border-box;
  width: 100px;
  padding: 10px;
  border: 10px solid black;
  margin: 10px;
}
```

![With box-sizing border-box](https://flaviocopes.com/images/css-border-box/with-box-sizing-border-box.png)

See? The actual element size is now 60 because it’s 100 - 10 * 2 (padding) - 10 * 2 (border).

Only the margin is left out, which is reasonable since in our mind we also typically see that as a separate thing: margin is outside of the box of the element.

This property is a small change but has a big impact in how you calculate your elements dimensions.

[Demo on Codepen](https://codepen.io/flaviocopes/pen/MWBJYQY)

If you like using it, you can apply it to every element on the page with this CSS rule, that applies this to every element

```css
*,
*:before,
*:after {
  box-sizing: border-box;
}
```