HTML & CSS
/Intermediate
box-sizing
Definition
The `box-sizing` property defines how the user agent should calculate the total width and height of an element.
Explain Like I'm New
The biggest trap in CSS. By default, if you set `width: 100px` and `padding: 20px`, the browser ADDs them together, making your box 140px wide (100 + 20 left + 20 right). This destroys layouts. Setting `box-sizing: border-box` forces the browser to shrink the content inside so the TOTAL width remains exactly 100px.
Real World Example
This is why almost every modern website starts with a CSS reset: `* { box-sizing: border-box; }`. Without it, adding padding to a 100% width container will make it 105% wide, causing horizontal scrolling.
Common Use Cases
- •Preventing horizontal scrollbars
- •Making math predictable when building layouts
Interactive Example
Interview Questions
basic
- What is the default value of `box-sizing`?
intermediate
- If a div has `box-sizing: border-box`, `width: 200px`, and `padding: 50px`, how wide is the content area?