Box model calculation in CSS - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Calculating total width of a box

Given a box with width: 200px, padding: 10px, border: 5px solid, and margin: 20px, what is the total width the box occupies horizontally in the normal flow (content + padding + border + margin)?

A 270rem

B 260px

C 270px

D 250px

💡 Hint

Remember to add padding, border, and margin on both sides (left and right) to the content width.

The total width is calculated as content width + left and right padding + left and right border + left and right margin.

So: 200 + (10*2) + (5*2) + (20*2) = 200 + 20 + 10 + 40 = 270px.

📝 Syntax

intermediate

Box-sizing property effect

If a box has width: 300px, padding: 15px, border: 10px solid, and box-sizing: border-box, what is the actual width of the content area inside the box?

A 320px

B 300px

C 270px

D 250px

💡 Hint

With box-sizing: border-box, the width includes content, padding, and border.

The total width is fixed at 300px including padding and border.

Content width = total width - (padding left + padding right) - (border left + border right) = 300 - 30 - 20 = 250px.

❓ rendering

advanced

Visual effect of margin collapsing

Two vertical boxes each have margin-top: 20px and margin-bottom: 30px. When stacked vertically, what is the vertical space between them due to margin collapsing?

A 30px

B 50px

C 20px

D 0px

💡 Hint

Margins between vertical boxes collapse to the larger margin, not the sum.

When vertical margins collapse, the space between boxes is the larger of the two adjacent margins.

Between the bottom margin of the first box (30px) and the top margin of the second box (20px), the larger is 30px.

❓ selector

advanced

Selecting only padding areas with CSS

Which CSS selector or property combination can be used to apply a background color to the content and padding areas of a box, excluding border?

A Use <code>background-clip: padding-box;</code>

B Use <code>background-clip: content-box;</code>

C Use <code>background-origin: border-box;</code>

D Use <code>background-clip: border-box;</code>

💡 Hint

The background-clip property controls where the background is painted.

background-clip: padding-box; restricts the background color to the content and padding areas, excluding the border area.

❓ accessibility

expert

Ensuring accessible focus outline with box model

A button has padding: 1rem and border: 2px solid transparent. On focus, the border changes to 2px solid blue. Why is this approach better for accessibility than adding an outline?

A Because outline is not visible on all browsers

B Because border changes do not cause layout shift and are visible to keyboard users

C Because padding is ignored by screen readers

D Because transparent borders are ignored by assistive technologies

💡 Hint

Think about visual stability and keyboard navigation.

Changing border color on focus provides a visible focus indicator without causing layout shifts, which can confuse users.

Outlines can sometimes cause layout shifts or be inconsistent across browsers.