Detailed explanation
The CSS box model describes how the browser calculates the space occupied by an element’s box. From inside to outside, it has four layers: content, padding, border, and margin. Content holds text, images, or other child content. Padding creates space between the content and the border. The border surrounds the content and padding, while margin creates space outside the border. Understanding these layers helps you control spacing, align components, and diagnose layouts that overflow or appear larger than expected.
For an ordinary block box, the width and height properties determine the size of a particular area according to box-sizing. With content-box, the initial value, a declared width applies only to the content area. Padding and border are added outside that width. For example, width: 200px, padding: 20px, and border: 5px solid black produce a border-box width of 250px: 200 + 40 + 10. Any horizontal margins are additional space outside this calculation. The same principle applies vertically when an explicit height is used.
With box-sizing: border-box, the declared width includes the content, padding, and border. Using the same example, the border-box width stays 200px, and the content width becomes 150px after subtracting 40px of horizontal padding and 10px of borders. Margin is never included in the declared width by either sizing mode. A common setup is *, *::before, *::after { box-sizing: border-box; }, which applies predictable sizing to elements and their generated pseudo-elements. This is useful for responsive layouts because adding padding usually does not increase a component’s declared outer dimensions.
Interviewers typically expect you to name the layers in order, distinguish padding from margin, and calculate dimensions correctly under both sizing modes. They may also check whether you know that adjacent vertical margins of block elements can collapse in normal block layout; they do not always add together. Browser developer tools show a box-model diagram with computed dimensions, making it easier to identify which layer causes unexpected spacing. Start debugging there rather than changing widths or adding negative margins without understanding the cause.
Key points to remember
- The four layers, inside out, are content, padding, border, and margin.
- Padding is inside the border; margin is outside it.
- With content-box, declared width excludes padding and border.
- With border-box, declared width includes padding and border, but not margin.
- A 200px width with 20px padding and 5px borders measures 250px across under content-box and 200px under border-box.
Common mistakes candidates make
- Including margin in the width covered by box-sizing: border-box.
- Adding padding and border from only one side when calculating total width or height.
- Assuming adjacent vertical margins always add together, ignoring margin collapsing.
Likely follow-up questions
What is the difference between padding and margin?
Padding creates internal space between content and the border, while margin creates external space beyond the border. An element’s background normally paints through its padding area, but it does not paint into its margin.
Why do developers commonly use border-box?
It lets you set a component’s width while keeping its padding and border within that width. This makes sizing easier to reason about, especially when placing components inside a fixed-width or responsive container.
What is margin collapsing?
In normal block layout, certain adjoining vertical margins combine into a single margin instead of adding together. For two positive collapsing margins, the result is the larger value; margins between flex or grid items do not collapse.
Interview tip: Name the four layers first, then use the 200px example to demonstrate the difference between content-box and border-box.