# Box Model

![The Box Model](https://3069112348-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MR93ctAFfSCsQwng6wL%2F-MU6xNYZW8iFJ5C24pLn%2F-MU6zLpwiyUIl3ChOIwj%2Fimage.png?alt=media\&token=342e8e09-88eb-4539-8b7b-0941c4d73368)

### Content Box vs Border Box <a href="#content-box" id="content-box"></a>

![Content Box vs Border Box](https://3069112348-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MR93ctAFfSCsQwng6wL%2F-MU6zmXdeXJSdIHLMH-V%2F-MU7-0wTwKL_ZH0P--HQ%2Fimage.png?alt=media\&token=daceb8a7-6bef-44ba-a22f-281c65cb84e7)

### Setting the box-sing for all elements

{% tabs %}
{% tab title="CSS" %}
```css
html{
  box-sizing: border-box;
}
*,
*:before,
*:after{
  box-sizing: inherit;
}
```
{% endtab %}
{% endtabs %}
