CSS Module 4
The box model, sizing and overflow interview questions
Interview questions on the box model, sizing and overflow: warm-ups, then what each harder question tests and how a good answer starts.
Warm-up questions
Short questions with short answers, each answered in full.
-
Fresher
What is the difference between box-sizing: content-box and border-box, and why do many projects set border-box everywhere?
Answered in the lesson The box model: content, padding, border, margin
-
Fresher
What is margin collapsing, and can physical horizontal margins collapse in a vertical-writing context?
Margin collapsing combines adjoining block-axis margins within one block formatting context in normal flow. In this horizontal-writing lab, that means top/bottom margins; in vertical-writing block flow, physical left/right margins can collapse. Add the largest positive margin to the most negative: 30 px with 20 px gives 30 px, and 30 px with −10 px gives 20 px. Adjoining connections can join siblings, a parent's first or last child, or both sides of an empty block unless padding, borders or a line box separates them. Flex and grid items, floats, absolutely positioned boxes and inline-blocks do not collapse their own margins. Margins also stay separate across a
flow-rootoroverflow: hiddenboundary. The lab’s inline-axis left/right margins do not collapse: its badges keep 30 + 20 = 50 px.From the lesson Margin collapse and formatting contexts
-
Fresher
What do min-content and max-content mean, and when would you use fit-content?
Answered in the lesson Sizing: percentages, intrinsic sizes and ratios
Questions with model answers
What each question tests, the first step of a good answer and the follow-ups to expect.
-
Fresher to mid
A design shows three cards in a 1,000 px row with 20 px gaps, each 320 px wide with 24 px of padding and a 1 px border. With width: 320px on each card, the third card wraps to a new line. Explain the numbers, fix it, and keep it right when the padding changes.
- What it tests
- Box-sizing arithmetic, reading a layout bug from its numbers, and choosing a fix that holds when the design changes.
- First step
- Add up what the browser draws. Under the default content-box each card is 320 + 2 × 24 + 2 × 1 = 370 px wide, so three cards and two gaps need 1,150 px, 150 px more than the row. With border-box each card is 320 px, and the row needs exactly 1,000 px.
- Follow-ups
-
- A third-party date picker inside one card breaks after the switch to border-box. What do you do?
- How do you roll border-box out to a large existing code base safely?
- Would a grid with three 1fr columns have avoided the problem?
From the lesson The box model: content, padding, border, margin
Model answer, Pro. Model answers open with any pass; prices are in the notice on this page.Opening the model answers with your pass…
Model answers open with any MySmartCoPilot pass.
- Pro pass · 1 week₹79$2.99
- 30 days₹179$5.99
- 1 year₹1,699$45
One payment; nothing renews unless you choose to. The price shown is the total you pay: no fees or charges are added at checkout.
Passes can’t be bought right now, so the model answers can’t be opened at the moment. If you have a pass, enter your licence key.
It also opens every other in-depth part in Learn and every Pro tool. Sales are final, except where the law gives you a right to withdraw, for example in the EU and the UK (refund policy).
In the answer:
- Model answer
- Follow-up answers
- Common mistakes
- Rubric
- Variants
- about 3 minutes
-
Mid to senior
A design system draws its focus rings with box-shadow, because outlines once ignored border-radius. An accessibility audit now reports that keyboard focus is invisible in Windows contrast themes. Explain why, and design a focus style that works everywhere without moving the layout.
- What it tests
- Forced colours mode, how outlines and shadows are painted, :focus-visible, and what WCAG 2.2 asks of a focus indicator.
- First step
- Forced colours mode replaces the page's colours with the user's and computes every box-shadow to none, so a ring drawn only with a shadow disappears. An outline survives: its colour becomes a system colour, even when it was transparent. Start from an outline on :focus-visible and keep any shadow as decoration.
- Follow-ups
-
- Do outlines follow border-radius in current browsers?
- How would you test forced colours without a Windows computer?
- What do WCAG 2.2's success criteria 2.4.7 and 2.4.13 ask of a focus indicator?
From the lesson The box model: content, padding, border, margin
Model answer, Pro.In the answer:
- Model answer
- Follow-up answers
- Common mistakes
- Rubric
- Variants
- about 4 minutes
-
Fresher to mid
A promo banner has a background colour and no padding, and its heading has margin-top: 24px. On the home page the space shows above the banner, outside its background, but in the product grid the same banner looks right. Explain both, and give two fixes with their trade-offs.
- What it tests
- Parent and first-child margin collapse, why grid and flex items behave differently, and choosing between flow-root, padding and a spacing convention.
- First step
- The heading is the banner's first in-flow child and nothing separates their top margins, so they collapse, and the combined 24 px margin belongs to the banner: it sits above the banner's background. A grid item starts its own formatting context, so in the grid the margin stays inside the banner.
- Follow-ups
-
- Why does overflow: hidden also fix it, and why might you not want that fix?
- The banner also ends with an empty paragraph. What happens to the space below it?
- How would a design system stop this kind of bug for good?
From the lesson Margin collapse and formatting contexts
Model answer, Pro.In the answer:
- Model answer
- Follow-up answers
- Common mistakes
- Rubric
- Variants
- about 4 minutes
-
Mid to senior
After you add container-type: inline-size to the main content wrapper so its components can use container queries, the gap between the last paragraph and the footer grows from 40 px to 64 px, and a filter panel made a container too shrinks to zero width. Explain both, and fix them without dropping container queries.
- What it tests
- What container-type does to formatting contexts and to intrinsic sizes, and tracing a spacing change back to a refactor.
- First step
- A size container establishes an independent formatting context, so the last paragraph's 24 px bottom margin no longer collapses with the footer's 40 px top margin across the wrapper's edge: the two now add up to 64 px. Inline-size containment also sizes a box as if it had no content along its inline axis.
- Follow-ups
-
- Which other properties change margin collapse in the same way?
- How do you give the filter panel its width back?
- How would you catch a regression like this before release?
From the lesson Margin collapse and formatting contexts
Model answer, Pro.In the answer:
- Model answer
- Follow-up answers
- Common mistakes
- Rubric
- Variants
- about 3 minutes
-
Mid to senior
A product listing page has a Cumulative Layout Shift of 0.24 on phones. Its images come from a CDN without width or height attributes and are styled width: 100%. Walk through how you measure it, estimate the shift caused by one image, and fix it.
- What it tests
- Layout shift arithmetic, how image attributes become an aspect ratio, and fixing layout shift in HTML and CSS rather than in script.
- First step
- Find what moves, with the Layout Instability API or the performance panel, then work out one shift as impact fraction times distance fraction. A 360 px wide 4:3 image that arrives late pushes what follows down 270 px, a distance fraction of 270 ÷ 740 = 0.36 on a 740 px tall screen; the impact fraction depends on how much of the screen the moved content covers.
- Follow-ups
-
- The products come in different shapes. What do you write in width and height?
- Would loading="lazy" make the shift better or worse?
- What causes layout shift besides images?
From the lesson Sizing: percentages, intrinsic sizes and ratios
Model answer, Pro.In the answer:
- Model answer
- Follow-up answers
- Common mistakes
- Rubric
- Variants
- about 4 minutes
-
Fresher to mid
A dashboard sidebar should be as tall as the content beside it. The developer gives the sidebar height: 100% and their shared parent min-height: 100vh, but the sidebar is only as tall as its links. Explain why, and give two fixes.
- What it tests
- Definite and indefinite sizes, percentage heights, and letting flex or grid stretch an item instead of using percentages.
- First step
- A percentage height resolves only against a definite height. The parent has only a minimum, so its height is still auto in this ordinary-block case, and height: 100% behaves as auto: the sidebar uses its content height. The stated one-line fixture gives a 24 px child inside a parent with a 200 px minimum.
- Follow-ups
-
- Why does height: 100vh on the sidebar cause a different bug?
- What changes if the sidebar must scroll on its own?
- When does a percentage height work inside a flex item?
From the lesson Sizing: percentages, intrinsic sizes and ratios
Model answer, Pro.In the answer:
- Model answer
- Follow-up answers
- Common mistakes
- Rubric
- Variants
- about 4 minutes
-
Fresher to senior
A card becomes flow-root, but two ordinary paragraphs inside it still have a 40 px gap despite 40 px and 24 px adjoining margins. Explain why the gap is not 64 px, then choose a stable component-spacing policy.
- What it tests
- Separate a formatting-context boundary from internal block margin collapse, and choose between margin rhythm and parent-owned gaps.
- First step
- Identify the two boxes whose margins meet. Establishing a new context contains its outer edge; it does not turn the ordinary paragraph children into flex items or clear their margins.
- Follow-ups
-
- What changes if the card becomes a flex column?
- How do negative margins change the calculation?
- How would you prevent default heading margins from leaking out?
From the lesson Margin collapse and formatting contexts
Model answer, Pro.In the answer:
- Model answer
- Follow-up answers
- Common mistakes
- Rubric
- Variants
- about 3 minutes
-
Mid to senior
A product image has CSS width 280 px, height 240 px and aspect-ratio 4/3. Its author expected a 210 px height. Explain the constraints, repair the sizing, and reserve the right space before the image loads.
- What it tests
- Distinguish a preferred ratio from fixed dimensions, apply image attribute ratios and size limits, and separate box geometry from object fitting.
- First step
- Inspect both sizing axes before blaming the ratio. A preferred ratio determines an automatic dimension only when the other constraints allow it; two definite dimensions already choose a box.
- Follow-ups
-
- What if the actual photograph has a different ratio?
- What changes when padding and borders cannot fit the requested size?
- Why can a correct arithmetic model still miss a page’s CLS?
From the lesson Sizing: percentages, intrinsic sizes and ratios
Model answer, Pro.In the answer:
- Model answer
- Follow-up answers
- Common mistakes
- Rubric
- Variants
- about 3 minutes