# CSS Basics - Box Model

## What is Box Model and How it works ?

The CSS Box Model describes that how elements are structured and displayed in web pages . It helps to calculate the dimension of the position of the elements in web pages.

The Box Model consists of four areas : Content , Padding , Border and Margin.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1737991495734/420c2eeb-4ebb-4dff-9706-8c89db04fed9.png align="center")

1. Content : This is the place where main contents like text, image etc. are displayed. This is the innermost area of the box. It controlled by properties width and height.
    
2. Padding : This is the place around the content and the border . It is controlled by padding-left, padding-right, padding-top, padding-bottom .
    
3. Border : The border wraps around the padding and content. Its thickness, style, and color can be customized using properties like border-width, border-style, and border-color.
    
4. Margin : The margin is the outermost layer, creating space between the element and other elements. It is Controlled by margin e.g., margin-top, margin-bottom ,margin-right, margin-left.
    

### Calculating total dimensions of the elements :

The formula to calculate the width and height is :

Total width = width + left padding + right padding + left border + right border + left margin + right margin

Total height = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin.

Let’s see with an example :

```xml
<head>
    <style>
        p{
            width: 200px;
            height: 300px;
            padding: 15px;
            border: 10px solid red;
            margin: 5px;
        }
    </style>
</head>
<body>
    <p>Chai aur code</p>
</body>
</html>
```

Total width = 200px (width) + 15px (left padding) + 15px (right padding) + 10px (left border) + 10px (right border) + 5px (left margin) + 5px (right margin) = 260px.

**Total Height** = 300px (Height) + 15px (Top Padding) + 15px (Bottom Padding) + 10px (Top Border) + 10px (Bottom Border) + 5px (Top Margin) + 5px (Bottom Margin) = 360px

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1737994137006/f8fe480a-3490-4404-a82d-4a01ae7bd6bf.png align="center")

## CSS Box Sizing

The box-sizing property in CSS is used to determine how the total width and height of an element are calculated. It controls whether padding and borders are included in the element’s overall dimensions or treated separately from the specified width and height.

* ### Type of Box Sizing
    
    Content Box , Border Box and Inherit
    
* ### Content Box (default)
    
    The width and height properties only include the **content** area. Padding and borders are **not included** in the specified dimensions and are added outside the content.
    

```xml
div {
  width: 160px;
  height: 80px;
  padding: 20px;
  border: 8px solid red;
  background: yellow;
}

.content-box {
  box-sizing: content-box;
  /* Total width: 160px + (2 * 20px) + (2 * 8px) = 216px
     Total height: 80px + (2 * 20px) + (2 * 8px) = 136px
     Content box width: 160px
     Content box height: 80px */
}
```

* ### Border Box
    

The width and height properties **include content, padding, and borders**. The specified dimensions represent the total size of the element.

```xml
div {
  width: 160px;
  height: 80px;
  padding: 20px;
  border: 8px solid red;
  background: yellow;
}

.border-box {
  box-sizing: border-box;
  /* Total width: 160px
     Total height: 80px
     Content box width: 160px - (2 * 20px) - (2 * 8px) = 104px
     Content box height: 80px - (2 * 20px) - (2 * 8px) = 24px */
}
```

* ### Inherit
    
    The box-sizing value is inherited from the parent element.
    

## Conclusion :

By understanding and utilizing the box-sizing property, you can simplify layout design and avoid unexpected sizing issues.