# CSS Box Model

# box model - 
CSS Box Model is a box that wraps around every HTML element.

When the HTML file is rendered on the browser, then browser renders each element as a rectangular box or a container because of this rendering property of the browser it is called Box Model.

CSS Box Model consists of:
   
```content```                    ```padding```                                ```border```                                 ```margin``` 




-  ## content -
This contains the actual content of the element such as texts, images which is displayed on the web page. Look at the below example for better understanding.


![content.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1668965596992/i9PB9alJM.png align="left")



-  ## padding -

 Padding is used to provide space around the content. We can provide padding from each side by using


```padding-top```                  ```padding-right```        ```padding-bottom```     ```padding-left``` 



![padding.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1668966334516/YYCrD5mTz.png align="left")



-  ## Border -

The border CSS property is used to give styling to the element's border.


```border-width```                                        ```border-style```                                  ```border-color```


 
![border.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1668967338763/Z2DOy2eEL.png align="left")



-    ## margin

Margin is used to provide margin-area on all four sides of the element.

```margin-top```             ```margin-right```       ```margin-bottom```           ```margin-left``` 



![margin.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1668968340542/LdqUz3Qwu.png align="left")