The CSS Box Model

What Is the CSS Box Model?

In CSS, every HTML element is treated like a rectangular box.

The CSS Box Model consists of four parts:

1. Content
2. Padding
3. Border
4. Margin

Let's understand each part with a simple example.

1. Content

Content is the actual information inside an element, such as text, images, or other elements.

div {
    width: 200px;
    height: 100px;
}

Here, the content area has a width of 200px and a height of 100px by default.

2. Padding

Padding is the space between the content and the border.

div {
    padding: 20px;
}

Here, 20px of space is added inside the border, around the content.

3. Border

A border surrounds the content and padding.

div {
    border: 2px solid black;
}

Here, a solid black border with a thickness of 2px is added around the element.

4. Margin

Margin is the space outside the border. It helps create distance between an element and other elements.

div {
    margin: 20px;
}

Here, 20px of space is added outside the element's border.

Example: Using the Box Model

Let's combine these properties in one example.

<div class="box">
    Hello World!
</div>

.box {
    width: 200px;
    padding: 20px;
    border: 2px solid black;
    margin: 20px;
}

In this example:

• The content width is 200px.
• The padding adds 20px on each side.
• The border adds 2px on each side.
• The margin creates 20px of space outside the border on each side.