Question 1

Explain content-box vs border-box.

Accepted Answer

content-box sizes content only; border-box includes padding+border in width/height. border-box is the common reset for predictable layouts. box-sizing inherits with * tricks carefully.

Question 2

How do margin, padding, and border differ?

Accepted Answer

margin is outside border (collapsible vertically); padding inside; border between. Backgrounds clip differently. Negative margins pull layout. padding doesn't collapse.

Question 3

What is margin collapse?

Accepted Answer

Adjacent vertical margins can combine into one; common with parent/child and siblings. BFC, padding, borders, flex/grid items prevent collapse. Horizontal margins don't collapse.

Question 4

What is a Block Formatting Context (BFC)?

Accepted Answer

A layout region that contains floats and prevents margin collapse across its boundary. Created by overflow not visible, flex/grid items, flow-root, etc. Useful float containment.

Question 5

How do width percentage and padding interact?

Accepted Answer

Percent padding is relative to containing block width (including vertical padding historically). Can surprise in height calculations. Prefer modern layout and gap when possible.

Question 6

min-width/max-width vs width — when?

Accepted Answer

Constraints allow intrinsic/content sizing with clamps; width is preferred size. Useful responsive patterns: width 100%; max-width 40rem. min-width:0 critical in flex.

Question 7

What does box-sizing inherit reset look like and trade-offs?

Accepted Answer

html { box-sizing: border-box } * { box-sizing: inherit } — predictable sizing globally. Third-party widgets may assume content-box. Document the reset.

Question 8

How do outlines differ from borders?

Accepted Answer

Outlines don't take space in the box model; often used for focus. outline-offset helps. Don't remove without accessible replacement.

Question 9

Explain overflow, scroll containers, and sticky pitfalls.

Accepted Answer

Overflow creates scrollports; sticky needs non-hidden ancestors and room to travel. overflow: hidden can kill sticky and create BFCs. Know which ancestor clips.

Question 10

What is the visual viewport vs layout viewport conceptually?

Accepted Answer

Mobile zoom/keyboards can change visual viewport; layout viewport drives CSS layout. position fixed and vh units historically quirky on mobile — svh/lvh/dvh help.

Question 11

How do you center a box horizontally and vertically (classic)?

Accepted Answer

Many ways: flex/grid place-items, absolute + inset/auto margins, margin auto for block widths. Prefer flex/grid for modern UI. Absolute centering needs positioned ancestor.

Question 12

Architect spacing tokens with the box model in mind.

Accepted Answer

Use consistent spacing scale via custom properties; prefer gap in flex/grid over margin hacks. Collapse and double-spacing issues shrink when gap is primary.

Box Model CSS Interview Questions

Other CSS interview topics