Every element is a rectangular box composed of content, padding, border, and margin layers — and the box-sizing property determines whether width and height apply to just the content (content-box) or include padding and border (border-box).
Every element box has content (innermost), padding, border, and margin (outermost). Padding gets the background color; margin is always transparent.
content-box (default) applies width/height to content only, so padding and border increase total size. border-box includes padding and border in the declared width/height.
Nearly all modern projects apply box-sizing: border-box to all elements because it makes sizing predictable — the element never exceeds its declared dimensions.
Adjacent vertical margins merge into the larger value rather than adding together. This does not happen in flex/grid containers or when padding/border separates parent and child.
The CSS box model is one of the most fundamental concepts in web layout and a staple of front-end interviews. Every HTML element rendered on the page generates a rectangular box, and the box model defines how that box's dimensions are calculated.
From inside out, every box has four areas:
width and height (or intrinsic sizing).padding (shorthand) or individual sides. Padding is inside the border and receives the element's background color.border-width, border-style, and border-color. Borders add to the element's visual size by default.The box-sizing property changes how width and height are calculated:
content-box (default): width and height apply only to the content area. Total rendered width = width + padding-left + padding-right + border-left + border-right. This means adding padding or border makes the element larger than the declared width, which frequently causes layout surprises.
border-box: width and height include content + padding + border. The content area shrinks to accommodate padding and border within the declared width. This model is more intuitive because the element never exceeds its declared size.
The universal reset *, *::before, *::after { box-sizing: border-box; } is used in virtually every modern project (Normalize.css, Tailwind CSS, Bootstrap, and most resets include it). This is one of the most commonly asked "why" questions in interviews.
Vertical margins between adjacent block-level elements collapse: if one element has margin-bottom: 20px and the next has margin-top: 30px, the gap between them is 30px (the larger value), not 50px. Margins also collapse between a parent and its first/last child if there is no padding, border, or content separating them. This behavior only applies to vertical (block-direction) margins — horizontal margins never collapse.
Margin collapsing does not occur in flex containers, grid containers, or elements with overflow other than visible.
Outlines (outline property) sit outside the border but do not affect layout or box dimensions. They are commonly used for focus indicators and accessibility. Unlike borders, outlines can be offset with outline-offset.
Every browser's DevTools shows a visual box model diagram. In Chrome, select an element and look at the Computed tab to see content, padding, border, and margin values in a nested rectangle visualization. This is an essential debugging tool.
Interviewers frequently ask: "What is the CSS box model?", "What is the difference between content-box and border-box?", "Why do most resets use border-box?", and "Explain margin collapsing." Understanding these thoroughly demonstrates solid CSS fundamentals.
Fun Fact
Internet Explorer 5 actually used border-box by default, which the standards community initially considered a bug. Years later, the industry adopted border-box universally — IE5 was right all along.