Common box model issues in CSS - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Understanding Box Model Width Calculation

Given a div with width: 200px, padding: 20px, border: 5px solid, and box-sizing: content-box, what is the total rendered width of the box in the browser?

A 250px

B 200px

C 250px plus padding and border

D 250px plus margin if any

💡 Hint

Remember that with content-box, padding and border add to the width.

With box-sizing: content-box, the width property sets only the content area width. Padding and border add extra space outside this width. So total width = content width + padding left + padding right + border left + border right.

Here: 200 + 20*2 + 5*2 = 250px total width. Margin is outside and adds more space if present.

📝 Syntax

intermediate

Fixing Unexpected Box Size Growth

Which CSS rule correctly prevents a div with width: 300px and padding: 30px from growing beyond 300px total width?

A padding: 0;

B box-sizing: content-box;

C width: calc(300px - 60px);

D box-sizing: border-box;

💡 Hint

Try to include padding inside the width instead of adding it outside.

Using box-sizing: border-box makes the padding and border count inside the specified width, so the total width stays 300px.

Other options either ignore padding or reduce width manually, but only border-box solves the problem cleanly.

❓ rendering

advanced

Visual Result of Mixed Box-Sizing

You have two sibling div elements inside a container of 500px width. The first div has width: 250px; padding: 20px; box-sizing: content-box;. The second div has width: 250px; padding: 20px; box-sizing: border-box;. What will you see visually?

A Both divs fit side by side exactly inside the container.

B The first div overflows the container, the second fits exactly.

C Both divs overflow the container.

D The second div overflows, the first fits exactly.

💡 Hint

Remember how padding affects total width differently for content-box and border-box.

The first div uses content-box, so total width = 250 + 40 + border (if any).

The second div uses border-box, so total width = 250px including padding.

Sum total width = 290 + 250 = 540px, which is wider than 500px container, so the first div causes overflow.

❓ selector

advanced

Selecting Elements to Fix Box Model Issues

You want to apply box-sizing: border-box; to all elements and their pseudo-elements to avoid box model issues globally. Which CSS selector achieves this correctly?

A *, *::before, *::after { box-sizing: border-box; }

B div, span, p { box-sizing: border-box; }

C html, body { box-sizing: border-box; }

D * { box-sizing: border-box; }

💡 Hint

Remember pseudo-elements can add extra boxes that affect layout.

Option A targets all elements and their ::before and ::after pseudo-elements, ensuring consistent box-sizing everywhere.

Option A misses pseudo-elements, which can cause unexpected layout issues.

Options C and D target only some elements, not global.

❓ accessibility

expert

Ensuring Accessible Focus Styles with Box Model

You add a focus outline to buttons using outline: 3px solid blue;. However, the outline is clipped because the button has overflow: hidden; and padding. How can you fix this so the focus outline is fully visible and accessible?

A Use <code>outline-offset: 3px;</code> to move the outline inside.

B Add <code>box-sizing: border-box;</code> to the button.

C Wrap the button in a container with padding and apply outline to the container.

D Remove <code>overflow: hidden;</code> from the button.

💡 Hint

Think about how to keep the outline visible without changing button's overflow or box model.

Removing overflow: hidden; (Option C) might break layout or hide other content.

Changing box-sizing (Option C) doesn't affect outline clipping.

Using outline-offset inside (Option C) moves outline inside the button, reducing visibility.

Wrapping the button in a container with padding and applying the outline to that container (Option C) ensures the outline is visible outside the button's clipped area, improving accessibility.