HTML CSS - Box Model

Understanding the CSS box model

The CSS box model is a fundamental concept in web design that describes how elements are structured and how their sizes are calculated. It consists of four parts: content, padding, border, and margin. This tutorial covers the CSS box model in detail.

Content Area

The content area is the innermost part of the box model, where the text and images are displayed. The width and height properties control the size of the content area.

.element {
    width: 200px;
    height: 100px;
}
            

Padding

Padding is the space between the content and the border. It can be set using the padding property, which can take one, two, three, or four values. Here are some examples:

/* Padding on all sides */
.element {
    padding: 10px;
}

/* Vertical | Horizontal */
.element {
    padding: 10px 20px;
}

/* Top | Horizontal | Bottom */
.element {
    padding: 10px 20px 30px;
}

/* Top | Right | Bottom | Left */
.element {
    padding: 10px 20px 30px 40px;
}
            

Border

The border surrounds the padding and content. It can be set using the border property, which includes the border width, style, and color. Here is an example:

.element {
    border: 2px solid black;
}
            

You can also set individual border properties:

.element {
    border-width: 2px;
    border-style: solid;
    border-color: black;
}
            

Margin

Margin is the space outside the border. It can be set using the margin property, which can take one, two, three, or four values. Here are some examples:

/* Margin on all sides */
.element {
    margin: 10px;
}

/* Vertical | Horizontal */
.element {
    margin: 10px 20px;
}

/* Top | Horizontal | Bottom */
.element {
    margin: 10px 20px 30px;
}

/* Top | Right | Bottom | Left */
.element {
    margin: 10px 20px 30px 40px;
}
            

Box Model Example

Here is an example that demonstrates all parts of the box model:

.element {
    width: 200px;
    height: 100px;
    padding: 10px;
    border: 2px solid black;
    margin: 20px;
    background-color: lightgray;
}
            

This will create a box with the following dimensions:

• Content: 200px x 100px
• Padding: 10px on all sides
• Border: 2px on all sides
• Margin: 20px on all sides

Box Sizing

The box-sizing property controls how the total width and height of an element are calculated. By default, it is set to content-box, which means the width and height include only the content area. You can change it to border-box to include padding and border in the width and height calculation. Here is an example:

.element {
    box-sizing: border-box;
    width: 200px;
    height: 100px;
    padding: 10px;
    border: 2px solid black;
}
            

In this example, the total width and height will include the content, padding, and border.

Overflow

The overflow property controls what happens when the content overflows the content area. Values include visible, hidden, scroll, and auto. Here is an example:

.element {
    width: 200px;
    height: 100px;
    overflow: auto;
}
            

Summary

In this tutorial, you learned about the CSS box model, including the content area, padding, border, and margin. You also explored the box-sizing property and the overflow property. Understanding the box model is essential for controlling the layout and design of web pages.