The CSS Box Model describes how the elements on a web page are structured and how their dimensions are calculated. It includes content, padding, border, and margin.

Understanding the Box Model

Every element on a web page is a rectangular box that consists of four areas:

• Content: The innermost part where text and images appear.
• Padding: Space between the content and the border, inside the element.
• Border: Surrounds the padding (if any) and the content.
• Margin: Space outside the border, separating the element from others.

Box Model Properties

The CSS Box Model properties include:

/* Content */
.content {
    width: 200px;
    height: 100px;
}

/* Padding */
.padding-example {
    padding: 20px; /* Space inside the element */
}

/* Border */
.border-example {
    border: 2px solid #333; /* Border surrounding the padding */
}

/* Margin */
.margin-example {
    margin: 30px; /* Space outside the border */
}

        

Visualizing the Box Model

Here is a visual representation of the CSS Box Model: