What is the default box-sizing value for HTML elements?

0-2 years experience

1. 1If you add a 20px padding to a div with width 200px and no box-sizing set, what will be its rendered width?
2. 2How would you make a button's total width stay at exactly 100px regardless of padding?
3. 3What happens if you set box-sizing: border-box on a child element but not on its parent?

2-5 years experience

1. 1A teammate added a 2px border to a card component and the layout broke. Explain how the default box-sizing could be causing this and how you'd fix it.
2. 2When integrating a third‑party widget that assumes border-box, what CSS changes would you make to avoid layout shifts?
3. 3During a UI refactor you need consistent sizing across components without manually adjusting widths. How would you approach this using box-sizing?

5-8 years experience

1. 1Your global CSS reset now sets box-sizing: border-box on all elements, and a legacy component renders incorrectly. How would you diagnose and resolve the issue while keeping the reset?
2. 2Discuss the trade‑offs of applying box-sizing: border-box at the root versus per‑component in a large‑scale React app.
3. 3How would you implement a theming system that enforces a consistent box-sizing strategy across multiple micro‑frontends?

8+ years experience

1. 1You are leading a migration of a monolithic codebase to a design system that mandates border-box everywhere. What architectural steps, tooling, and cross‑team processes would you put in place to ensure a safe transition?
2. 2Consider performance and CSS cascade implications of adding a universal box-sizing rule in a legacy app with thousands of selectors. How would you mitigate risks?
3. 3How would you convince stakeholders to adopt a global box-sizing change given potential breakage in third‑party integrations?