Top 15 CSS Interview Questions, Actually Explained

The capstone of the CSS and Tailwind series — the actual mechanism behind each answer, not just the answer, because that's what a real follow-up question tests for.

Box model and layout

• What's the difference between content-box and border-box? — With content-box (the historical default), width sets only the content area, and padding/border add on top; with border-box, width is the final rendered total, with padding/border subtracted from the content area to fit. Full breakdown, including why most CSS resets set border-box globally, in the box-model post.
• Why does margin collapse between elements, but padding doesn't? — It's a specific, named CSS behavior for adjacent vertical margins: the larger of two touching margins wins and the smaller is absorbed. Padding has no equivalent rule and never collapses.
• How do you vertically center a div? — Depends on the layout context, and knowing why matters more than the one-liner: display: flex; align-items: center; justify-content: center on the parent is the common modern answer; a two-dimensional Grid (place-items: center) is the equivalent for a Grid context.

Specificity and cascade

• How is specificity actually calculated? — A three-part score compared in order: IDs, then classes/attributes/pseudo-classes, then elements/pseudo-elements. More of a higher tier always beats any amount of a lower one. Worked examples in the specificity post.
• Why should !important be avoided? — It overrides the entire specificity system outright, and once one rule needs it to win, every future conflicting rule needs it too — an arms race, not a fix.
• Do inline styles beat any CSS selector? — Yes, structurally — they're not even scored by the same specificity system; only !important outranks them.

Layout systems

• When do you reach for Flexbox vs Grid? — Flexbox for one-dimensional, content-driven layout (a navbar, a button group); Grid for two-dimensional, layout-driven structure (a page shell with a sidebar). Full decision framework in the Flexbox vs Grid post.
• What does mobile-first actually mean, technically? — Base CSS targets the smallest screen, with min-width media queries adding complexity upward — versus desktop-first, where max-width queries have to subtract complexity back out, which fails unsafely if one is missed. Mechanism in the responsive-design post.

Why 'centering a div' is a real test, not a meme

It's asked so often precisely because a shallow answer (one memorized line) versus a real one (knowing why that line works, and what the alternative approaches trade off) are both extremely fast to distinguish — which is exactly what makes it efficient as an actual interview signal, not a joke question.