HTML & CSS Interview Question #65

What is the CSS box model?

CSS Fundamentals, Selectors, Cascade, Specificity, Box Model, Units & Typography Mid-Level Intermediate

Quick Interview Answer

The CSS box model describes how an element is represented as content surrounded by padding, border, and margin. By default, declared width and height normally apply to the content box, with padding and border added outside those dimensions.

Detailed Explanation

The CSS box model describes how an element is represented as content surrounded by padding, border, and margin. By default, declared width and height normally apply to the content box, with padding and border added outside those dimensions.

Understanding the box model is essential for predicting element sizes, spacing, overflow, and layout behavior.

Code Example

.card {
    width: 300px;
    padding: 20px;
    border: 2px solid #ccc;
    margin: 16px;
}

/* With content-box, the rendered border-box width
   is larger than 300px. */