THE BOX MODEL.
Tags: beginners, css, html, webdev
Published: 2022-08-03 23:16:54

---
title: THE BOX MODEL.
published: true
description: Understand how the css box-sizing property influences the padding, margin, and border of an HTML element.
tags: beginners, css, html, webdev
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oiz0rbb4mp0ivkh4068v.png
---

The box model is a fundamental principle that every web designer/web developer should understand and be able to implement properly. Without a proper understanding of the box model, building complex web pages would be strenuous which is caused by having to deal with a lot of CSS bugs.

In this article, I will be explaining the box model with a box that is extrinsically sized (more on this later). Extrinsic sizing is the default sizing of every HTML element and it is done by setting the `box-sizing` property to `content-box`.

``` css
*{
    box-sizing: content-box;
}
```

## What is the CSS box model? 

![Box Model](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jc1zybf9539ddlq50d26.png)

Every element on the webpage from a paragraph, an image, and a heading to an element with rounded corners all live inside a box. Of course, this box can sometimes be invisible nevertheless, it is this box that determines how this element appears on the web page.
So what's the box model? The box model is a term used to describe the various properties of a CSS box. These properties are :

1. The Content Box
2. The Padding Box
3. The Border Box
4. The Margin Box

## The Content Box
The Content box is the innermost part of the box. It holds the main HTML content to be displayed on the webpage e.g text, an image, or a video player. 
The width and height of this box are determined by the content's width and height respectively and can be controlled using the `width` and `height`.
```css
div {
    width: 120px;
    height: 75px; 
    font-size: 15px;
    color: blanchedalmond;
    font-family: "Segoe UI";
    background-color: #76a2aa;
}
```
**OUTPUT:** 

![Content Box description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gyn4vils10t1ttodvifa.jpg)

From our result, our content here would be the text "Content Box" and the content's width and height value would be the values of the set `width` and `height`. The remaining properties were used to design the content by increasing its's size with `font-size`, setting the type to `font-family` with a `color`, and giving the content box a  `background-color` so that it is visible. 

> **Note**:  In some cases, if the box was used for simply designing the webpage the content box can be empty.

## The Padding Box
This is the whitespace that wraps the content box.  It could also be seen as the space between the content box and the border box. 
Its default value for most browsers is 0px and since it just acts like whitespace it does not have any color. 
The `padding` property controls the padding on all sides of the element and is a shorthand for the following properties: 
1. `padding-top`: controls the padding space above the element. 
2. `padding-right`: controls the padding space on the right side of an element.
3. `padding-bottom`: controls the padding space on the bottom of the element.
4. `padding-left`: controls the padding space on the left side of the element.

The `padding ` property can take either one, two, three, or four values.
* **One value** controls the value of the padding space on all four sides.
* With **Two values** the first value controls the `padding-top` and `padding-bottom`.
* With **Three values** the first value controls the `padding-top` , the second value controls the `padding-left` and `padding-right` while the third value controls the `padding-bottom`.
* With **Four values**, the first, second, third and fourth value controls the `padding-top`, `padding-right`, `padding-bottom` and `padding-left` respectively.

To define the padding of any element we could write:
```css
.element {
    padding-top : 20px;
    padding-right : 30px;
    padding-left : 30px;
    padding-bottom : 10px;
}
```
OR using the shorthand format
```css
.element {
    padding : 20px 30px 10px;
}
```

To define the padding of our div element, we would write
```css
div {
    width: 120px;
    height: 75px;
    padding : 10px; 
    font-size: 15px;
    color: blanchedalmond;
    font-family: "Segoe UI";
    background-color: #76a2aa;
}
``` 
**OUTPUT:** 

![Padding Box description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z7oo7uriu23d7uf31gxj.jpg)

From the above result we can see that the padding space on all the sides of the `div` element has increased by 10px and since we are working with an **Extrinsically sized box**, this **increases** the width and height of this element.

To calculate the new width and height of our element we would do this :  
- New width = `padding-left` + `width` + `padding-right`
- New height = `padding-top` + `height` + `padding-bottom`

**OUTPUT:** 

![Padding Box description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/syje294omtgeg5sgmq21.jpg)

You would also notice that space has been added to the top and left side of our element to make it look like it has shifted diagonally.

>**Note:** Padding does not take negative and color values. The color here was used to illustrate how its value affects the size of any element.

## The Border Box
This box covers the padding box and the content box. The `border` property controls the borders on all sides of the element. To apply the border to an element, the `border` property requires three inputs which are  :
1. `border-width`
2. `border-style` 
3. `border-color` 

**Border-width**

The `border-width` specifies the thickness of the border. Its value could be `thin`, `medium`, `thick`, and a < length> The more its value is increased the more the width of the element increases. To control the border-width element, the following properties are used :
- `border-top-width` : controls the on top of the element.
- `border-left-width` : controls the width on the left side of the element.
- `border-bottom-width` : controls the width at the bottom of the element.
- `border-right-width` : controls the width on the right side of the element.

**Border-style**

The `border-style` specifies the kind of styling the border's element will have. Its value can be: 
- `solid`: displays a single, straight and solid line.
- `dotted`: displays a series of rounded dots.
- `dashed`: displays a series of short square-ended dashes or line segments.
- `double`: displays two straight lines.
- `groove`: displays a border with a carved appearance.
- ` ridge`: displays a border with an extruded appearance.
- `none` : displays no border.
- `ridge`: displays a border with an extruded appearance.
- `outset`: displays a border that makes the element embossed.
- `inset`: displays a border that makes the element appear embedded.

**Border-color**

The value the `border-color` takes would be the color of the border.
e.g red, #a79b9b, rgb(135, 187, 87) e.t.c.

To define the border of any element, we could write :

```css
.element {
    border-width : 20px;
    border-style : solid;
    border-color: brown;
}
```
OR using the shorthand format

```css
.element {
    border : 20px solid brown;
}
```

Here is how we define the border for our div element
```css
div {
    width: 120px;
    height: 75px;
    padding : 10px;
    border: 10px solid #7380ec;
    font-size: 15px;
    color: blanchedalmond;
    font-family: "Segoe UI";
    background-color: #76a2aa;
}
```
**OUTPUT:** 

![Border description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c3l8nl3i3y6pasnuzip5.jpg)

When we add a border to an **Extrinsically sized box/element** we also **increase** the width and height of the box. 

- New width = `border-left-width` + `padding-left` + `width` + `padding-right` + `border=right-width`
- New height = `border-top-width`+ `padding-top` + `height` + `padding-bottom` + `border-bottom-width`

## The Margin Box
This is the outermost part of the element. This part of the box model separates the element from the rest of its surroundings. It's default value is 8px. The `margin` property controls the margins on all sides of the element. 

The `margin` property can take both negative and positive values. We know that when the margin increases, the separation of the element from other elements increases as well, but what happens when the margin value starts becoming negative? What happens is that the element starts drawing every element around it to itself (you could think of it as a black hole).

To control the margin on each side of the box the following properties are used : 
* `margin-top`: This property Increases the space between the element and its environment at the top.  You could think of this property as pushing the element down to create more space above itself. When its value is negative it does the opposite, which is, that it pushes the element upwards by creating below it.
* `margin-right`: Increasing the value of this property pushes the element to the left by increasing the space between itself and other elements towards the right.  Rather than pushing the element to the left, decreasing the `margin-right` value pushes the element to the right by creating space in the opposite direction.
* `margin-bottom`: Increasing the value of this property pushes every element below it downwards, and as a child element, it increases the size of its parent element. By doing this, it creates more space between itself and the other elements below it. As a child element, decreasing the `margin-bottom` value to a negative value would decrease the size of its parent element. This would cause the element to overlap with other elements ultimately leading to an unstructured layout.
* `margin-left`: As the value of this property is increased the element shifts to the right which is caused by the increase in the space between the element's left side and its environment. As a child element if the `margin-left` property has a very large positive value it could cause the element to break out of the parent element from the right resulting in an unstructured layout. When the `margin-left` value is decreased to a negative number it shifts the element to the left causing it to behave like `margin-right`.

The `margin ` property can take either one, two, three, or four values.
* **One value** controls the value of the margin space on all four sides.
* With **Two values** the first value controls the `margin-top` and `margin-bottom`.
* With **Three values** the first value controls the `margin-top` , the second value controls the `margin-left` and `margin-right` while the third value controls the `margin-bottom`.
* With **Four values**, the first, second, third and fourth value controls the `margin-top`, `margin-right`, `margin-bottom` and `margin-left` respectively.

Having a margin with a negative value becomes necessary when its parent element is the `body` of the DOM.

To define the margin of any element we could write :
```css
.element{
    margin-top :10px;
    margin-right : 7px;
    margin-bottom : 10px;
    margin-left : 7px;
}
```
**OR** using the shorthand
```css
.element{
    margin : 10px 7px;
}
```
Let's define the border of our div element

```css
div {
    width: 120px;
    height: 75px;
    padding : 10px;
    border 10px solid #7380ec;
    margin : 30px;
    font-size: 15px;
    color: blanchedalmond;
    font-family: "Segoe UI";
    background-color: #76a2aa;
}
```
**OUTPUT:** 

![Margin Box description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rt4e5cuqifm40yoin28g.jpg)


From our result, we can see that the div element was shifted 30px to the right and 30px downwards.

> **Note:**   Margin does not increase the width or height of any element but in some cases, could affect the height and width of its parent element if the height and width of its parent element are not defined.  

![Margin description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eu0xwwotdwkgg1pacmuu.jpg)

## Intrinsic sizing vs. Extrinsic sizing
 When increasing the `border` or  `padding` of a box we expect that the width and height of the box should increase but developers can still maintain the specified `width` of the box. This type of sizing is called **Intrinsic Box Sizing**. To activate intrinsic sizing for all elements in your stylesheet simply add this block of code.

 ``` css
* {
    box-sizing : border-box;
}
```
Most developers use Intrinsic sizing to keep the size of the element consistent even when `padding` and `border` are applied.

Here is what our div element would look like if it was Intrinsically sized.

![Intrinsic Sizing](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1l38vmr30vuwsybg2zmw.jpg)

From the image above, we see that the `width` (120px) does not change after padding and border were added. What happened here is that the padding and the border start filling the space of the content box rather than adding to it as in the case of Extrinsic-sizing. 

![Intrinsic sizing description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kwxes5zw9m1ijk34lk5j.jpg)

Let's say you were creating a menu bar for a phone of 390px.

![Intrinsic sizing description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/icdzbf6s16clxwjsqm9d.jpg)

To shift the content away from the edge of the menu bar you have the option of only using the padding.

If you applied extrinsic sizing the content would move away from the box but the width of the box would increase resulting in an unstructured layout.

![Wrong Menu](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mjzx2i7eom7uka2at56i.jpg)

The case would be different if Intrinsic sizing was applied. Rather than adding unnecessary width. It just adds the padding without increasing the width.

![Fixed Phone Menu](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cebyd3evktcnfjtg5ndh.jpg)

**Fallbacks**

Intrinsic Sizing sounds nice but something strange occurs when the size of our `padding `becomes greater than the `width` of our element.
```css
div{
    box-sizing: border-box;
    width: 120px;
    height: 75px; 
    font-size: 15px;
    padding: 86px !important;
    margin: 30px;
    border: 10px solid #7380ec;
    color: blanchedalmond;
    font-family: "Segoe UI";
    background-color: #76a2aa;
}
```

![Intrinsic Fallback](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r861656arf9fbsoj0gd9.jpg)

The applied padding fills the whole content box and since it is greater than the `width` it increases the size of the box.


## Conclusion
In this article you have understood : 
* What is the box model is.
* The differences between each component of the box model and how they affect the way elements are rendered on the webpage.
* How to implement the box model in the short-hand form.
* The differences between Intrinsic and Extrinsic sizing.