CSS Box Model (original) (raw)

Last Updated : 21 Jan, 2026

The CSS Box Model defines how elements are sized and positioned by assigning a box in the DOM tree that determines an element's dimensions and its position relative to other elements.

Screenshot-2024-12-10-105714

Components of the box model

Each element in the box model is made up of distinct layers that define its size and spacing on a web page.

1. Content Area

The content area is the core part of the CSS box model that holds the actual content of an element.

The content edge refers to the four edges of the content area.

2. Padding Area

The padding area is the space between an element’s content and its border, contributing to the element’s overall size and spacing.

3. Border Area

The border area is the outer boundary of an element that surrounds the padding and contributes to the element’s total height and width.

4. Margin Area

The margin area is the space outside an element’s border that controls the distance between the element and surrounding or parent elements.

Box Sizing Property in CSS

There are two type's of box-sizing properties in CSS

1. Content-Box(default property)

When box-sizing is set to content-box (the default), the element’s final size includes the content dimensions plus padding.

HTML `

<style>
    div {
        height: 20px;
        width: 20px;
        box-sizing: content-box;
        padding-left: 20px;
        padding-right: 20px;
        border-left: 5px solid red;
        border-right: 5px solid red;
    }
</style>
Hello GFG

`

This code will create a box model with a border line width of 0.4px always and border-area of 1.6px and padding area as 20px width on both sides of the content area.

Screenshot-2024-12-10-121925

**Content Area (Width) :The width of the content area is fixed at 200px.

**Padding

**Border

**Total Width

The reason the total width is increased unexpectedly is because box-sizing: content-box applies the width to the content area only .The padding and border are added outside the content area, leading to an increase in the overall width and height of the element.

2. Border-Box

When box-sizing: border-box is used, the element’s total size stays as specified, and the content area shrinks to accommodate padding and border.

HTML `

<style>
    div {
        height: 20px;
        width: 70px;
        box-sizing:border-box;
        padding-left: 20px;
        padding-right: 20px;
        border-left: 2px solid red;
        border-right: 2px solid red;
    }
</style>
Hello GFG

`

This code creates a box model where the content width is adjusted to accommodate the padding and border thickness.

Screenshot-2024-12-10-123433

Use Cases of CSS Box Model

Here are some use cases of CSS Box Model:

Default box-sizing: content-box

Default behavior where padding and borders are added outside the content area, leading to an increased overall width/height.

HTML `

<style>
    div {
        width: 200px;
        padding: 20px;
        border: 2px solid black;
        box-sizing:content-box;
        background-color: lightgreen;
    }
</style>
This is a div with box-sizing content-box.

`

The total width of the element will be 200px + 20px (left) + 20px (right) + 5px (left border) + 5px (right border) = 250px.

Using box-sizing: border-box for Consistent Sizing

Ensure the padding and border are included within the specified width/height to maintain a fixed size for layout consistency.

HTML `

<style>
    div {
        width: 200px;
        padding: 20px;
        border: 2px solid black;
        box-sizing: border-box;
        background-color: lightcoral;
    }
</style>
This is a div with box-sizing border-box.

`

The total width remains 200px, with padding and border included in the 200px size.

Setting box-sizing for All Elements

Apply box-sizing: border-box to all elements globally to simplify layout calculations and prevent unexpected element size changes.

HTML `

<style>
    * {
        box-sizing: border-box;
    }
    div {
        width: 100%;
        padding: 20px;
        border: 2px solid blue;
        background-color: lightyellow;
    }
</style>
This is a div with border-box applied globally.

`

All elements are sized consistently, with padding and borders included inside the width/height.

Fixed Layout with box-sizing: border-box

Creating a fixed-size element with padding and border without altering the layout dimensions.

HTML `

<style>
    div {
        width: 300px;
        height: 20px;
        padding: 15px;
        border: 10px solid green;
        box-sizing: border-box;
        background-color: lightblue;
        font-size: 12px;
    }
</style>
This is a fixed-size div with box-sizing border-box.

`

Creating a Responsive Box with box-sizing

Ensuring that padding and borders do not cause layout issues in a responsive design.

HTML `

<style>
    * {
        box-sizing: border-box;
    }
    .container {
        max-width: 100%;
        padding: 20px;
        border: 5px solid purple;
        background-color: lightgreen;
    }
</style>
This is a responsive box with border-box.

`

The element resizes according to the screen width, with padding and borders included in the total size, avoiding overflow.