Answers and explanations · Size boxes and make text comfortable

Compare the reasoning, not just the final appearance. Other correct solutions can satisfy the same requirements.

1. Width calculation

Content-box: border box is 300 + 32 + 4 = 336px. With two 10px margins, the occupied horizontal span is 356px. Border-box: the border box is 300px; its content width is 264px; adding margins gives 320px. These figures assume ordinary horizontal boxes with no competing sizing constraints.

2. Growing with content

A card with no fixed height expands to fit its content. A fixed height can cause text to spill out or be clipped, especially with zoom or translation. Equal-looking card rows are a layout concern, not a reason to discard overflowing information.

3. Image repair

img { max-width: 100%; height: auto; display: block; }

The existing max-width can still constrain the 800px width; removing it exposes the narrow-screen overflow. Remove the forced 800px CSS width and 120px height from the experiment and restore max-width: 100%. The HTML width/height attributes still describe the original aspect ratio. The CSS maximum permits shrinking, and auto height preserves that ratio.

Return to practice · Return to lesson