HTML & CSS Interview Question #66

What is the difference between content-box and border-box?

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

Quick Interview Answer

With box-sizing: content-box, width and height apply to the content area, so padding and borders increase the final outer dimensions. With border-box, the declared width and height include the content, padding, and border.

Detailed Explanation

Many projects apply border-box globally because it makes component sizing easier to reason about, especially in responsive layouts.

Code Example

html {
    box-sizing: border-box;
}

*, *::before, *::after {
    box-sizing: inherit;
}

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