CSS Box Model

What is the CSS Box Model?

The CSS Box Model describes how the size of a box (HTML element) is calculated: content, padding, border, and margin. It's essential for designing and laying out web pages.

Key Concepts

Here are the most important aspects of the box model:

1. Structure of the Box

Every element in CSS is treated as a rectangular box, made of:

• Content: The inner area of the box.
• Padding: Space between content and border.
• Border: The edge of the box.
• Margin: Space outside the border.

div {
    width: 300px;
    padding: 10px;
    border: 5px solid black;
    margin: 15px;
}
                    

2. Content Area

The content area contains the actual content like text, images, or other elements.

div {
    width: 200px;
    height: 100px;
    background-color: lightblue;
}
        

3. Padding

Padding adds space between the content and the border of an element.

div {
    padding: 20px;
    background-color: lightgreen;
}
        

4. Border

The border wraps around the padding and content.

div {
    border: 5px solid black;
}
        

5. Margin

Margins create space between the element and its neighbors.

div {
    margin: 20px;
}
        

6. Box Width and Height

The width and height of the box include the content area only (by default).

div {
    width: 300px;
    height: 150px;
}
        

7. Border-Box Model

The box-sizing property defines how the width and height are calculated.

div {
    box-sizing: border-box;
    width: 300px;
    height: 150px;
    padding: 20px;
    border: 10px solid black;
}
        

8. Overflow

The overflow property controls what happens to content when it overflows the box.

div {
    width: 100px;
    height: 50px;
    overflow: scroll;
}
        

9. Padding vs Margin

Padding affects the inside space of the box, while margin affects the outside space.

Padding: space between content and border.
Margin: space between the element and others.
    

10. Border Shorthand

The border shorthand sets border width, style, and color in one line.

div {
    border: 5px dashed red;
}
        

11. Margin Collapse

When two vertical margins meet, the larger margin is used instead of adding them together.

div {
    margin: 20px;
}
p {
    margin-top: 10px;
}
        

12. Background Clipping

The background-clip property determines whether the background extends into the border or stops at the padding.

div {
    background-clip: content-box;
    background-color: yellow;
    padding: 20px;
    border: 5px solid red;
}
        

13. Responsive Box Model

Using percentages or relative units makes the box model responsive to screen size changes.

div {
    width: 50%;
    padding: 10%;
    margin: auto;
}