# CSS Box Model Explained

The **CSS box model** is a container that contains multiple properties including borders, margin, padding, and the content itself. It is used to create the design and layout of web pages. It can be used as a toolkit for customizing the layout of different elements. 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**: This property is used to display the text, images, etc, that can be sized using the **width and height** property.
    
* **padding**: This property is used to create space around the element, inside any defined border.
    
* **border:** This property is used to cover the content & any padding, & also allows to set the style, color, and width of the border.
    
* **margin:** This property is used to create space around the element ie., around the border area.
    

## Illustration of CSS Box Model:

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1673542752649/4c790bd3-9209-4073-9914-d8eba8d1fa79.png align="center")

* **Content Area:** This area consists of content like text, images, or other media content. It is bounded by the content edge and its dimensions are given by content-box width and height.
    
* **Padding Area:** It includes the element’s padding. This area is actually the space around the content area and within the border-box. Its dimensions are given by the width of the padding-box and the height of the padding-box.
    
* **Border Area:** It is the area between the box’s padding and margin. Its dimensions are given by the width and height of the border.
    
* **Margin Area:** This area consists of space between border and margin. The dimensions of the Margin area are the margin-box width and the margin-box height. It is useful to separate the element from its neighbors.
    

---

> Thanks for reading my blog! 😊