CSS Box-Model Simplified
Tags: beginners, css, webdev
Published: 2022-04-21 07:45:24

Each element on a web page is wrapped around by a box. The arrangement of these boxes makes up the layout of the website. Building layouts is a crucial part of front-end development which is what makes understanding the box-model indispensable.  

**Features of the box:**
Each box has _padding_, _margin_ and _border_.

**Padding**: The space between the content and the border.

**Margin**: The space around the border. 

**Border**: Indicates the dimensions of the box.
 
<figure>
<img src ="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oldawl3m5e6y9hj6xw7f.png">
<figcaption style="margin-top: -40px">https://commons.wikimedia.org/wiki/File:Box-model.svg</figcaption><br><br>
</figure>

**Dimensions of the box**:
The dimensions of the box are computed as follows:

_width of box = width of element + padding-left + padding-right + border-left+ border-right_

_height of box = height of element + padding-top + padding-bottom + border-top + border-bottom_

Take a look at the following CSS for example:

```
div {
  width: 100px;
  height: 100px;
  padding: 10px;
  border: 5px solid red;
  margin: 10px;
}
```

_width of the box = width of element (100px) + padding-left(10px) + padding-right(10px) + border-left(5px)+ border-right(5px) = 130px_

_height of the box = height of element(100px) + padding-top(10px) + padding-bottom(10px) + border-top(5px) + border-bottom(5px) = 130px_

Therefore, the dimensions of the box are _130px x 130px_.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bs4hg3ge08ngqd3aerla.png)

Notice that while we intended the element to be _100px x 100px_, the padding and border added _30px_ to both width and height. This can make our elements overflow and compete with each other for space, messing up the layout.

**Box Sizing**:
The solution for this is a CSS property called _box-sizing_. The default value of _box-sizing_ is set to _content-box_.
 
_Content-box_: Includes width and height of only the element. The padding and the border are not included.
 
Therefore, padding and border add extra pixels to the element, thus increasing the overall dimensions of the box.

The alternate option is _border-box_. 

_Border-box_: Includes padding and border. As padding and border are altered, the dimensions of the element are adjusted accordingly, to keep the dimensions of the box fixed.

<figure>
<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hovwwb92ki9wgik9xcfd.png">
</figure>

Let's apply _border-box_ to our previous example.
```
div {
  width: 100px;
  height: 100px;
  padding: 10px;
  border: 5px solid red;
  margin: 10px;
  box-sizing: border-box;
}
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/12j18xpgnun2cozd9sqt.png)

Notice that the dimensions of the box remain _100px x 100px_ even after adding padding and border. This is achieved by automatically adjusting the dimensions of the element to _70px x 70px_, in order to accommodate padding and border.

**Tip**:
Set the _box-sizing_ to _border-box_ using the universal selector(*), to reset the default _box-sizing_ property of all elements, at the beginning of your stylesheet.

```
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
```

If this article helped your understanding of the box-model, let me know in the comments!