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.

Practice

1. Which CSS property controls how the total width and height of an element are calculated, including padding and border?

easy

A. display

B. box-sizing

C. position

D. float

Solution

1. Step 1: Understand the box model components

   The box model includes content, padding, border, and margin, which affect element size.

2. Step 2: Identify the property that changes size calculation

   box-sizing changes whether width/height include padding and border or not.

3. Final Answer:

   box-sizing -> Option B

4. Quick Check:

   Property controlling size calculation = box-sizing [OK]

Hint: Remember: box-sizing controls total element size calculation [OK]

Common Mistakes:

• Confusing box-sizing with display or position
• Thinking margin affects width calculation
• Assuming float changes box size

2. Which of the following is the correct CSS syntax to make an element's width include its padding and border?

easy

A. box-sizing: border-box;

B. box-sizing: content-box;

C. box-model: border-box;

D. box-sizing: padding-box;

Solution

1. Step 1: Recall the box-sizing values

   content-box excludes padding and border; border-box includes them.

2. Step 2: Identify correct syntax

   The correct property is box-sizing and the value to include padding and border is border-box.

3. Final Answer:

   box-sizing: border-box; -> Option A

4. Quick Check:

   Include padding and border = border-box [OK]

Hint: Use box-sizing: border-box to include padding and border [OK]

Common Mistakes:

• Using incorrect property name like box-model
• Confusing content-box with border-box
• Using non-existent value padding-box

3. Given this CSS:

div {
  width: 200px;
  padding: 20px;
  border: 5px solid black;
  box-sizing: content-box;
}

What will be the total width of the div element as seen in the browser?

medium

A. 250px plus padding and border

B. 250px

C. 250px plus margin

D. 200px

Solution

1. Step 1: Understand content-box sizing

   With content-box, width is only content width; padding and border add outside it.

2. Step 2: Calculate total width

   Total width = content width (200px) + left/right padding (20px + 20px) + left/right border (5px + 5px) = 200 + 40 + 10 = 250px.

3. Final Answer:

   250px plus padding and border -> Option A

4. Quick Check:

   content-box adds padding and border outside width [OK]

Hint: content-box excludes padding/border from width [OK]

Common Mistakes:

• Assuming width includes padding and border with content-box
• Adding margin instead of border/padding
• Calculating only one side of padding or border

4. You have this CSS:

p {
  width: 300px;
  padding: 10px;
  border: 2px solid blue;
  box-sizing: border-box;
}

But the paragraph still overflows its container. What is the most likely cause?

medium

A. The box-sizing property is misspelled

B. Padding and border are not included in width with border-box

C. The container has less than 300px width

D. Width property is ignored with border-box

Solution

1. Step 1: Verify box-sizing effect

   border-box includes padding and border inside the width, so width 300px is total size.

2. Step 2: Consider container size

   If the container is narrower than 300px, the paragraph will overflow despite correct box-sizing.

3. Final Answer:

   The container has less than 300px width -> Option C

4. Quick Check:

   Container smaller than element causes overflow [OK]

Hint: Check container width if element overflows with border-box [OK]

Common Mistakes:

• Thinking border-box excludes padding and border
• Assuming box-sizing is misspelled without checking
• Believing width is ignored with border-box

5. You want a fixed width box of exactly 400px including padding and border. Which CSS setup achieves this correctly?

hard

A. width: 400px; padding: 20px; border: 5px solid; box-sizing: content-box;

B. width: 430px; padding: 20px; border: 5px solid; box-sizing: content-box;

C. width: 350px; padding: 20px; border: 5px solid; box-sizing: border-box;

D. width: 400px; padding: 20px; border: 5px solid; box-sizing: border-box;

Solution

1. Step 1: Understand box-sizing impact

   With border-box, width includes padding and border, so width: 400px means total size is 400px.

2. Step 2: Check each option

   width: 400px; padding: 20px; border: 5px solid; box-sizing: border-box; uses border-box with width 400px, so total box size is exactly 400px including padding and border.

3. Final Answer:

   width: 400px; padding: 20px; border: 5px solid; box-sizing: border-box; -> Option D

4. Quick Check:

   border-box + width = total size fixed [OK]

Hint: Use border-box to fix total box size including padding and border [OK]

Common Mistakes:

• Using content-box and expecting width to include padding/border
• Adjusting width manually without box-sizing
• Ignoring border thickness in calculations