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.

Practice

1. Which parts of the CSS box model add space inside the element's border?

easy

A. Margin and padding

B. Padding and content

C. Margin and border

D. Border and margin

Solution

1. Step 1: Understand box model parts

   The box model has content, padding, border, and margin. Padding is inside the border, margin is outside.

2. Step 2: Identify inside spaces

   Padding adds space inside the border, content is inside padding. Margin is outside the border.

3. Final Answer:

   Padding and content -> Option B

4. Quick Check:

   Inside space = padding + content [OK]

Hint: Padding is inside border; margin is outside [OK]

Common Mistakes:

• Confusing margin as inside space
• Thinking border adds inside space
• Mixing padding with margin

2. Given this CSS, what is the total width of the element?

width: 200px; padding: 10px; border: 5px solid; margin: 20px;

easy

A. 250px

B. 270px

C. 270px plus margin

D. 250px plus margin

Solution

1. Step 1: Calculate width including padding and border

   Width = content width (200px) + padding left+right (10px*2=20px) + border left+right (5px*2=10px) = 230px.

2. Step 2: Add margin outside the box

   Margin left+right = 20px*2 = 40px. Total space taken horizontally = 230px + 40px = 270px.

3. Final Answer:

   270px plus margin -> Option C

4. Quick Check:

   Total width = content + padding + border + margin [OK]

Hint: Add padding and border twice, margin outside [OK]

Common Mistakes:

• Forgetting to double padding and border for both sides
• Including margin inside width
• Adding margin only once

3. What is the total height of this element including padding and border?

height: 150px; padding: 15px 10px; border: 3px solid;

medium

A. 186px

B. 150px

C. 176px

D. 181px

Solution

1. Step 1: Calculate vertical padding and border

   Padding top+bottom = 15px * 2 = 30px. Border top+bottom = 3px * 2 = 6px.

2. Step 2: Add padding and border to content height

   Total height = content height (150px) + padding (30px) + border (6px) = 186px.

3. Final Answer:

   186px -> Option A

4. Quick Check:

   Total height = content + padding + border [OK]

Hint: Add vertical padding and border twice to height [OK]

Common Mistakes:

• Using horizontal padding values for vertical calculation
• Forgetting to double padding and border
• Ignoring border size

4. This CSS code is meant to create a box 300px wide including padding and border. What is wrong?

width: 300px; padding: 20px; border: 10px solid;

medium

A. The box will be wider than 300px

B. The box will be exactly 300px wide

C. Padding and border are ignored in width

D. The box will be narrower than 300px

Solution

1. Step 1: Calculate total width with padding and border

   Content width is 300px, but padding adds 20px*2=40px and border adds 10px*2=20px, total 360px.

2. Step 2: Understand box-sizing default

   By default, width sets content box only, so padding and border add outside, making box wider than 300px.

3. Final Answer:

   The box will be wider than 300px -> Option A

4. Quick Check:

   Default box-sizing excludes padding and border [OK]

Hint: Width excludes padding and border unless box-sizing set [OK]

Common Mistakes:

• Assuming width includes padding and border by default
• Ignoring box-sizing property
• Not doubling padding and border

5. You want a box with total width 400px including padding and border. Padding is 15px and border is 5px. What should the CSS width be if box-sizing: content-box;?

hard

A. 430px

B. 400px

C. 350px

D. 360px

Solution

1. Step 1: Calculate total padding and border width

   Padding left+right = 15px * 2 = 30px. Border left+right = 5px * 2 = 10px. Total extra = 40px.

2. Step 2: Subtract padding and border from total width

   Desired total width = 400px. Content width = 400px - 40px = 360px.

3. Step 3: Confirm CSS width value

   Set width: 360px; to get total 400px box size with content-box sizing.

4. Final Answer:

   360px -> Option D

5. Quick Check:

   width = total - (padding + border) [OK]

Hint: Subtract padding and border from total width [OK]

Common Mistakes:

• Adding padding and border instead of subtracting
• Forgetting to double padding and border
• Confusing content-box with border-box