CSS Box-Model
Tags: boxmodel, css, design
Published: 2021-09-04 10:58:31

CSS box model is a container which contains multiple properties including borders, margin, padding and the content itself. The web browser renders every element as a rectangular box according to the CSS box model.

Box-Model has multiple properties in CSS. Some of them are given below: 
* content
* padding
* border
* margin


## Content area

  The innermost rectangle, known as the content area, may contain text or other visual elements. It is bounded by the content edge and its dimensions are given by content box width and height. If the element is a block element, then the content edge can also be set with the ` min-width`, `max-width`, `min-height`, `max-height ` properties.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ctrzdvb2r0s9e78wujm3.png)

If the `box-sizing` property is set to `content-box`, the content area's size can be explicitly defined with the  `width`, `min-width`, `max-width`, `height`, `min-height`, and `max-height ` properties


##  Padding area
  
Padding is the space between the border and content of an element. Padding is an important element in web design because it helps make content more visible and readable. 

 There are four padding properties,
 `padding-top`
 `padding-right`
 `padding-bottom`
 `padding-left`

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a6un39opfk2w90izewdt.png)

All the padding properties can be changed independently or a short hand `padding` property can be used to change all the values at once.
Short hand properties syntax:
`padding`: `padding-top`  `padding-right`  `padding-bottom` `padding-left`;


## Border area
 It is the area between the box’s `padding` and `margin`. Its dimensions are given by the width and height of border.
The borders are calculated by the `border-width` and shorthand border properties. 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cgrak2den44mpsiula9c.png)

Short hand `border` properties syntax :
  `border`: `border-width` `border-style` `border-color` 

If the `box-sizing` property is set to `border-box`, the border area's size can be explicitly defined with the  `width`, `min-width`, `max-width`, `height`, `min-height`, and `max-height ` properties


## Margin area

The space around the elements can be set using the CSS `margin` properties.

There are four margin properties,
 `margin-top`
 `margin-bottom`
 `margin-left`
 `margin-right`

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4nfq342jkkl9p270j834.png)
In addition to the above four properties, we also have a short hand property called `margin`.
`margin` : `margin-top` `margin-right` `margin-bottom` `margin-left`;

Margin clears the area around an element the difference is that it takes care of the area outside the border.The margins are transparent and cannot have any background colors.


## Calculating Overall dimensions

#### How to calculate the total width of the box,

The total width of the element would follow the following formula,
    Total element `width` = `width` + `padding-left` + `padding-right` +  `border-left` + `border-right`  + `margin-left ` + `margin-right`.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wmv5qtzpvof5glwbsqa9.png)

#### How to calculate the total height of the box,

The total height of the element would follow the following formula
    Total element `height` = `height` + `padding-top` + `padding-bottom` + `border-top` + `border-bottom` + `margin-top` + `margin-bottom `
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t2dino0qn5t35o3gvgge.png)

After spending some time and getting familiar with the basics of the CSS Box Model, it can be helpful in designing the layouts efficiently.