What are the four parts of the CSS box model?
Content, padding, border, and margin — from innermost to outermost.
What does box-sizing: content-box do?
It’s the default. Width and height apply only to the content area. Padding and border are added on top, making the rendered box larger than the specified dimensions.
What does box-sizing: border-box do?
Width and height include content, padding, and border. The content area shrinks to accommodate padding and border within the specified dimensions.
Why is border-box often preferred for layout?
It makes sizing more predictable — the total rendered size matches the width/height you set, so elements with padding and borders still fit their intended space.
What is the content area?
The area where text, images, or other content is displayed. Its size is controlled by the width and height properties (in content-box mode).
What is the padding area?
The space between the content and the border. It extends the content area and is controlled by the padding properties.
What is the border area?
The area wrapping content and padding. Its thickness is set by border-width and related properties.
What is the margin area?
The outermost layer — empty space outside the border that separates the element from its neighbors. Controlled by margin properties.
Is the margin included in the element’s total size?
No. The margin affects space on the page but the box’s visible area stops at the border.
What is margin collapsing?
When vertical margins of adjacent block-level elements combine (collapse) into a single margin equal to the larger of the two, rather than adding together.
What is the difference between block boxes and inline boxes?
Block boxes break onto a new line and respect width/height. Inline boxes flow within text and don’t respect width/height (only horizontal padding/margin/border push other elements).
How do you make an inline element respect vertical margin, padding, and border?
Set display: inline-block — it stays in the inline flow but the block-direction spacing is respected.
What is the outer display type of a box?
It determines how the box participates in flow layout — either block (breaks onto new line, fills available width) or inline (flows with text).
What is the inner display type of a box?
It determines how children inside the box are laid out, e.g. display: flex sets the inner type to flex while keeping the outer type as block.
In the standard box model, if width is 350px, padding is 25px, and border is 5px, what is the total horizontal space?
410px — 350 + 25 + 25 + 5 + 5. Padding and border are added to both sides.
In the alternative (border-box) model with the same values, what is the total horizontal space?
350px — the specified width already includes padding and border. The content area shrinks to 290px.
Does the background extend under the border by default?
Yes. The background extends to the outer edge of the border (underneath it in z-ordering). This can be changed with the background-clip property.
For non-replaced inline elements, what determines the contribution to line height?
The line-height property, even though padding and border are still visually rendered around the content.
What properties can you use to size the content area?
width, min-width, max-width, height, min-height, and max-height.
When is box-sizing: content-box actually useful?
When using position: relative or absolute, because positioning offsets stay relative to the content and remain independent of border/padding changes.
