Box sizing in CSS - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Understanding box-sizing property

Which box-sizing value makes the width and height include padding and border?

A border-box

B content-box

C padding-box

D margin-box

💡 Hint

Think about which option makes the box size include everything inside the border.

The border-box value makes the width and height include the content, padding, and border. This means the total size stays as you set it.

The default content-box only includes the content size, so padding and border add extra size.

📝 Syntax

intermediate

Correct CSS syntax for box-sizing

Which CSS snippet correctly sets the box-sizing to border-box for all elements?

CSS

/* Choose the correct CSS code */

A * { box-sizing: border box; }

B * { box-sizing: borderbox; }

C * { box-sizing: border_box; }

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

💡 Hint

Check the spelling and syntax of the value.

The correct value is border-box with a hyphen. Other options are invalid and cause the property to be ignored.

❓ rendering

advanced

Visual effect of box-sizing on element size

Given this CSS and HTML, what is the total width of the div in pixels?

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

<div>Box</div>

A 200px

B 250px plus margin

C 250px

D 250px plus padding

💡 Hint

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

With content-box, the width is only the content area (200px). Padding adds 20px on each side (40px total), and border adds 5px on each side (10px total). So total width = 200 + 40 + 10 = 250px.

❓ selector

advanced

Applying box-sizing to specific elements

Which CSS selector applies box-sizing: border-box; only to all input and textarea elements?

A input & textarea { box-sizing: border-box; }

B input, textarea { box-sizing: border-box; }

C input + textarea { box-sizing: border-box; }

D input textarea { box-sizing: border-box; }

💡 Hint

Look for the selector that targets both elements separately.

The selector input, textarea targets all input and all textarea elements individually.

input textarea targets textarea inside input (which is invalid HTML). input & textarea is invalid syntax. input + textarea targets only textarea immediately after input.

❓ accessibility

expert

Box-sizing and accessibility for responsive design

Why is setting box-sizing: border-box; on all elements important for accessible responsive layouts?

A It ensures padding and borders do not increase element size, preventing layout shifts on zoom or font resize.

B It disables user zoom to keep layout fixed.

C It hides overflow content to avoid scrollbars.

D It automatically adjusts font size based on screen width.

💡 Hint

Think about how box-sizing affects element size when users zoom or change font size.

Using border-box makes sure the total size of elements stays consistent even when padding or borders are added. This helps prevent unexpected layout changes when users zoom or increase font size, improving accessibility.

Other options do not relate to box-sizing or accessibility.