CSS box-sizing: Predictable Element Sizing
The box-sizing property controls if padding and borders are added outside an element's width or carved out from inside. Using border-box makes layouts predictable, ensuring a width: 100px box is exactly 100px wide.
Why it exists
CSS needs a way to determine an element's final size on screen. The original box model (content-box) separates content dimensions from padding and border, which requires manual calculation for layout. This proved unintuitive for building grids, so border-box was introduced for more predictable sizing.
The mental model
Think of a picture frame. With the default content-box, if you ask for a 5x7 inch photo area (width and height), the final framed object will be larger because of the frame's thickness (border) and matting (padding). With border-box, you specify the final outer dimension of the frame, say 8x10 inches, and the photo area inside shrinks to accommodate the frame and matting.
How it works
The box-sizing property has two main values. The default is content-box, where width and height apply only to the content. The final rendered width is width + padding-left + padding-right + border-left-width + border-right-width. The second value is border-box. Here, width and height define the total size of the element including its border and padding. The content area inside shrinks to make room. A width: 350px element with a 10px border will render at exactly 350px wide, leaving 330px for the content. Margin is always added outside for both models.
When to use it
Use box-sizing: border-box for almost all layout work. It makes responsive design and grid systems vastly simpler. When you set an element to width: 50%, it will occupy exactly half of its parent's width, regardless of its padding or border. This is why many CSS resets include a rule like , ::before, *::after { box-sizing: border-box; }.
When not to use it
There are few modern use cases for sticking with content-box. You might encounter it in legacy codebases or in very specific situations where you need to control the content area's size precisely and have the border and padding expand outward from that fixed size. However, this is rare and often leads to more complex CSS.
One canonical example
Imagine two columns, each set to width: 50%. With the default content-box, if you add padding: 20px to each, their total widths become 50% + 40px. They will no longer fit side-by-side in their container and one will wrap to the next line. If you set box-sizing: border-box on both, they will each take up exactly 50% of the container's width, with the 20px padding applied internally. They will fit perfectly.
Interview question
You set two elements to "width: 50%" and add "padding: 10px". To guarantee they fit side-by-side without wrapping, which box-sizing value is best?
- a.padding-box, to control how padding affects the element's overall size.
- b.margin-box, to prevent margins from causing overflow issues.
- c.border-box, as it includes padding within the element's declared width.Correct
- d.content-box, as it ensures the content area remains fixed.
Why? this is the answer
With border-box, the element's declared width (50%) includes its padding, ensuring it occupies exactly 50% of the parent's space. content-box, the default, would add the padding outside the 50% width, making each element wider than 50% and causing them to wrap.
Just read this? Test yourself on what you have been reading.
Read the original → developer.mozilla.org
- #css
- #layout
- #box model
- #design systems
You just looked this up. Could you explain it out loud?
That is the part interviews actually test. Tezvyn takes questions like this one and gives you what the interviewer is really checking, the answer that lands, and the mistake that ends the conversation, in the four minutes before your next meeting.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on css — each one lists the topics its interview covers.
See open roles