CSS Box Model

CSS

Every HTML element is a box. The CSS Box Model describes the space around elements:

Content — The actual text/image
Padding — Space between content and border
Border — The edge of the box
Margin — Space outside the border

Understanding the box model is essential for layout control.

Example — CSS

.card {
    /* Content width */
    width: 300px;

    /* Padding: space inside */
    padding: 20px;

    /* Border */
    border: 2px solid #e2e8f0;
    border-radius: 12px;

    /* Margin: space outside */
    margin: 16px auto;

    /* Box sizing (important!) */
    box-sizing: border-box;
}

Result

This is a card
padding: 20px, border: 2px, border-radius: 12px

PreviousCSS Selectors

Completed!Back to All Tutorials

Interview Questions — CSS Box Model

5 questions commonly asked in interviews

Q1 What is the CSS box model? Beginner

The CSS box model describes how every HTML element is treated as a box with content, padding, border, and margin.

Q2 What are the parts of the box model? Beginner

The four parts are content, padding, border, and margin.

Q3 What is padding in CSS? Beginner

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

Q4 What is margin in CSS? Intermediate

Margin is the space outside the border that separates one element from another.

Q5 What does box-sizing: border-box do? Advanced

It includes padding and border inside the element width and height, making layout calculations easier.

Frequently Asked Questions

Common doubts about CSS Box Model

Margin is outside the border.

Padding is inside the border, between content and border.

Yes, margin can have negative values, but it should be used carefully.

No, padding cannot have negative values.

It makes element width easier to manage by including padding and border inside the declared width.

Test Your Knowledge

5 questions · Earn 50 XP

0 / 5

Q1 Which is part of box model?

Q2 Padding is space between?

Q3 Margin is space?

Q4 Which property sets border?

Q5 Which value helps easier width calculation?

More on CSS Box Model

Cheatsheet, tips, resources & what to learn next

Quick Cheatsheet

Padding

.box { padding: 20px; }

Margin

.box { margin: 20px; }

Border

.box { border: 1px solid #000; }

Box Sizing

* { box-sizing: border-box; }

Width With Box

.box { width: 300px; padding: 20px; border: 1px solid #ccc; }

Pro Tips

Use box-sizing: border-box globally in most projects.

Use padding for internal spacing.

Use margin for spacing between elements.

Avoid using margin when padding is more suitable.

Inspect box model in browser developer tools.

Resources

MDN Box Model Docs

W3Schools Box Model Practice

CSS Tricks Box Sizing Docs

freeCodeCamp CSS Practice

CSS Box Model Video Video

Up Next

CSS Display CSS Position CSS Flexbox CSS Grid Responsive CSS