CSS tutorial series: Box Model
Tags: beginners, webdev, tutorial, css
Published: 2023-01-18 15:38:44

When styling, it's necessary to keep in mind that everything that CSS shows is a box, regardless of whether that box resembles a circle or any other shape.

![box model](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/98fe1glnaoum0x01sbny.png)

The body `<body>` is also a box meaning these shapes are inside of a box.

![box model](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ngimh6c1ltrzmvi83vo9.png)

Based on the boxes's set dimensions, `display` value, and content, boxes behave differently and, by default, the contents will impact the their sizes. Let's discuss that for a moment.

The size of an element is measured by the size it would have entirely based on its content. That is its **<u>intrinsic size</u>**.

## Intrinsic sizing 
With intrinsic sizing, your browser makes choices based on the size of the content (default behavior) in the box, meaning instead of attempting to resize the content, our box will be resized along its content.

The `min-content` and `max-content` sizes of an element are taken under consideration when using intrinsic sizing.

### min-content
`min-content` can be defined as the intrinsic minimum width of the content. For example: 

- When working with a box, the `min-content` size is determined by the longest word in the string inside the box. That means, that the box's content size is going to be in the longest word in the string of text that we have.

- When working with a string of text, content size is determined by soft-wrapping the text as much as possible without making the text overflow, which means, making it appear as if the text is on different lines when  it is actually still on the same line.

![min content](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o0ms1w8fsqqkauietqaa.png)

As we can see, each box is the same width as the longest word in the sentence it contains.
We've done this by setting the width to `min-content`.

### max-content
`max-content` is the opposite to `min-content`, the content will be displayed as wide as possible and not wrap onto a new line.

![max content](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f60prpycfn6s5o3lbex8.png)

## Extrinsic sizing
Let's assume that an element's width and height are both fixed at 100 pixels. Everything inside the element is strictly constrained by these dimensions, which will be respected unless the content is too large for the box, or there will be an overflow (the content will be rendered outside of the box).

![overflow](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jdpmzqxlasrs9hs99l7x.png)

## Box model 
As we previously mentioned, everything is a box in CSS. We will now examine the areas that each box includes. Every area has a different function.


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

We can see, that we have :

- Content box: It is where your content is.

- Padding box: It is the area that the padding property creates, which is the border around the content box. (the padding is inside the box).

- Border box: The `border` property creates the border which surrounds the padding box. 

- Margin box: It is the area around your border and,  is determined by the `margin` property on your box.


your browser's developer tools, can help you understand how the box model works and how it affects your  website. To open you developer tools you must click on: 

- `Cmd + option + C` on MacOS
- `Ctrl + Shift + C` on Windows/Linux.

![Dev tools](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5b0wpnkv0gs1nt41l0vu.png)

## Dev tools tutorial by google
[Different ways to open Chrome DevTools](https://www.youtube.com/watch?v=X65TAP8a530&t=59s)

## Manipulating the box model and display value
As we mentioned in one of our earlier posts [CSS tutorial series: Precedence] (https://dev.to/fullstackjo/css-tutorial-series-css-precedence-1a3p), your browser's default styles are applied to your HTML elements by the user agent stylesheet. 

## Display property
The display property has a range of values that determine how an HTML element will behave.
We will discuss three of these values which are  significant for this tutorial.

| Display value | 
|---------------|
| block |  
| inline | 
| inline-block |

- When the display property is set to `block`, the element becomes a block level element. A block level element such as `<div>` or `<p>` will start on a new line and take the entire width of the page.

![block level element](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kr2g48wm1p9v1cn4vxip.png)

- When the display property is set to `inline`,the element becomes an inline level element. the `height` and `width` property will not affect the element which means, it will stay the same size.

![inline level element](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/caiqd1yvmcyj7r49zrdk.png)

As you can see here, a `width` and `height` of `300px` was given to the span but it remained the same size `109.97 x 26`

- When the display property is set to `inline-block`,the element becomes an inline level element but a height and width can be applied to it.

### Here are some examples of Block and inline level elements.
| Block level Elements | Inline level Elements|
|----------------------|:--------------------:|
|`header`,`nav`, `main`,`section`, `div`, `article` ,`aside`,`table`, `form`, `ol`, `ul`, `li`| `a`, `button`, `textarea`, `select` `input`|

The Last **Important** thing we are going to talk about in this post is `box-sizing`.

## Box sizing
`box-sizing` instructs our box on how to determine its size. By default, the `box-sizing` property on every element is set to content-box.
When you specify `content-box` as the value for `box-sizing`, the width and height of your box will be applied to the content box. The padding and border values are then added to the content box.


![content-box](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x5ylswmtir5uaqqsr23m.png)

Let's look at an example.

```
div {
  height: 200px;
  border: 5px solid black; 
  padding: 10px;
}
```
As you can see, our div has dimensions of 200x200, a 5px border, and 10px of padding. How high would our box be?

The height of our box is `200px` we add to that `5px` for the top `border` and another `5px` for the bottom `border`, then we add `10px` for each of the top and bottom padding.

height = 200 + 5 + 5 + 10 + 10
height = 230px

#### Tips 
- `border` applies 5px to each side of the box.
- `padding` applies 10px to each side of the box.

If `border-box` which is an alternative box model is the value assigned to the `box-sizing` property, then the values of padding and border will be part of the width. That means that the content box will shrink in order for the box to keep its specified `width`/ `height`.

![border-box](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uvvhfn12c6b2o7tht7rv.png)

The value `border-box` is more frequently used since it ensures that all elements are sized in this more logical manner.

To apply this to your entire page 

```
* {
 box-sizing: border-box;
}
```
### Research these properties

- `border-radius`
- `border` 
- `padding`
- `margin`

 _Most of these properties are shorthand properties_