In the CSS box model, the width and height properties define the size of the content box by default. The total visible size of an element also includes padding, borders, and margins around that content area.

Box Model Components

1
Content box: The area where text and other content appear. Controlled by width and height.
2
Padding: The space between the content and the border. Increases total element size.
3
Border: The outline around the padding and content.
4
Margin: The space outside the border, separating the element from others.

Example with Default `box-sizing: content-box`

With the default content-box, the specified width and height apply only to the content area. Padding and border add to the total rendered size.

Example with `box-sizing: border-box`

With box-sizing: border-box, the width and height include the content, padding, and border. This makes sizing more predictable and easier to manage in responsive layouts.

Key Takeaways

1
content-box (default): Width and height apply only to content; padding and border increase total size.
2
border-box: Width and height include padding and border; total size stays fixed.
3
Margins are always outside the box and do not affect element width or height.

Difficulty: 5/10

Topics: box model, width calculation, padding and border impact

Scenario Questions

0-2 years experience

1
You need a button that is exactly 200 px wide on the page. If you set width:200px; padding:10px; border:2px solid; what will be the rendered width, and how would you adjust the CSS to keep the visual width at 200 px?
2
A div has box-sizing: content-box and you apply width:150px; padding:20px; border:5px solid. What total width does the browser allocate, and how would you change one property to make the total width 150 px?

2-5 years experience

1
While implementing a responsive card component, you notice that adding padding:15px makes the card overflow its container even though you set width:100%. Explain why this happens and propose two ways to fix it.
2
A teammate reports that a modal dialog looks wider in Chrome than in Firefox after adding a 1 rem border. Walk me through how the box model could cause this discrepancy and what CSS changes you’d make to ensure consistent sizing across browsers.

5-8 years experience

1
You are refactoring a legacy UI library that uses box-sizing: content-box everywhere. The design system now requires components to align to an 8 px grid, and you need to guarantee that component widths stay consistent when padding and borders are added. How would you approach the migration, and what trade‑offs would you consider regarding performance and backward compatibility?
2
Our dashboard renders thousands of table cells with dynamic content. Each cell has variable padding and border widths, and we’re seeing layout thrashing during resize. Explain how the interaction of width, padding, and border can affect layout calculations, and suggest a strategy to minimize reflows.

8+ years experience

1
The company is moving from a monolithic CSS codebase to a design‑token driven system with CSS‑in‑JS. One challenge is ensuring that component width calculations remain stable when tokens for spacing and border change. How would you design a system‑wide approach to abstract the box model so that future token changes don’t break layouts?
2
We have multiple teams maintaining separate micro‑frontends that share a common layout container. Some teams use box-sizing: border-box while others rely on content-box. This inconsistency leads to integration bugs. Propose an architectural governance model and migration plan to unify box‑sizing across the organization, considering release coordination and backward compatibility.

Follow-up Questions

❓What changes when you switch to `box-sizing: border-box`?
❓How does the box model affect responsive layouts that use percentages?
❓Are there any accessibility or performance considerations when manipulating padding and borders?