Tutorials › CSS Mastery › The Box Model

The Box Model

5 min read Quiz at the end

Every element is a box: content, padding, border, and margin. Add box-sizing: border-box so padding and border are included in the width. This is the most impactful CSS rule to add to every single project.

The Box Model

div {
    width: 200px;
    height: 100px;
    padding: 20px;        /* inside space */
    border: 2px solid #333;
    margin: 16px;         /* outside space */
}

/* Best practice — include padding in width */
* {
    box-sizing: border-box;
}

Total width = content + padding + border (with border-box)

← Typography Next: Margin and Padding →

Topic Quiz · 5 questions

Test your understanding before moving on

1. What is the box model?

💡 The CSS box model describes the rectangular box of every element.

2. What does padding do?

💡 Padding is the space inside the border, between the content and the border.

3. What does margin do?

💡 Margin is the space outside the border, pushing other elements away.

4. box-sizing: border-box means:

💡 border-box makes width/height include padding and border — much easier to work with.

5. What is outline vs border?

💡 outline doesn't affect layout (no space taken up); border adds to the box model.

Quick Access

The Box Model

The Box Model

Test your understanding before moving on