Content-box excludes padding and borders from declared dimensions. Border-box includes them, making container sizing easier to reason about.
Before you start
You should be comfortable with semantic HTML, CSS selectors and browser developer tools. Reproduce the scenario in a small page before adding framework code. Inspect both visual appearance and keyboard or accessibility behavior; a correct screenshot alone is not sufficient evidence.
The practical goal is to reason through this situation: A 200px border-box element keeps its outer width at 200px while padding reduces content space. Read the walkthrough first, then try the interview exercise before opening its answer. The important part is explaining the decision and its consequences, rather than remembering a definition alone.
Step-by-step walkthrough
Step 1: Identify the declared width
With content-box, width describes content alone. Padding and borders increase the outer border-box width.
Step 2: Calculate outer dimensions
A 200px width with 20px padding on each side and 1px borders totals 242px under content-box.
Step 3: Choose predictable sizing
Border-box includes those additions within 200px, leaving 158px content. Margins still sit outside it.
Worked scenario
A 200px border-box element keeps its outer width at 200px while padding reduces content space.
.field { width: 200px; padding: 20px; border: 1px solid; box-sizing: border-box; }If the parent provides only 200px, this fits before margins are considered. A full-width element with horizontal margins can still overflow; border-box is useful but does not absorb margins or every containing-block constraint.
Common mistake
Margins are outside both sizing models.
Verify the behavior
Inspect computed content and outer widths. Add margins and observe why they must be included separately in layout reasoning.
Interview exercise
Why does a full-width input overflow?
Answer and reasoning
Check padding, borders, box-sizing and its containing block; percentage width alone does not account for every outer dimension.
Continue learning
Compare the scenario with the HTML and CSS interview questions and test your understanding with the HTML and CSS MCQs. For terminology and implementation details, consult the reference material.