Before this lesson

Complete selectors and cascade, and know how to inspect computed styles.

What you will be able to do

Calculate rendered width, distinguish padding, border and margin, and diagnose overflow caused by fixed dimensions.

Understand the mechanism

With content-box, width sets only the content area: a 300px width plus 24px padding and 1px border on both sides gives a 350px border box. border-box includes padding and border in the declared width. Margin remains outside that box regardless of the sizing mode.

Content-driven height is usually more robust than a fixed height. Larger fonts and longer translations can otherwise be clipped. max-width helps, but long URLs, preformatted code and automatic minimum sizes in layout items may still overflow. Identify the element causing the problem before applying overflow:hidden globally and hiding content.

Runnable example

<style>
  * { box-sizing: border-box; }
  .card { width: 300px; max-width: 100%; padding: 24px;
          border: 1px solid #cdd9d1; margin: 24px auto; }
</style>
<article class="card">A simple card</article>

Trace and verify

Confirm a 300px card width, switch to content-box and observe the 350px result. Narrow the viewport to inspect max-width. Add a long URL; remaining overflow calls for a wrapping or minimum-size decision, not endlessly reducing the font size of ordinary paragraphs.

Common mistakes and boundaries

Percentage height needs a suitable definite reference. Vertical margins can collapse in block layout, so two 20px margins do not always create 40px separation. In Flexbox and Grid, gap often provides clearer spacing because the container manages relationships between items.

Practice challenge

Build a card with a 480px maximum that retains all text at a 320px viewport and enlarged text. Explain why you chose a maximum rather than an unconditional fixed width.

Reference solution and reasoning

Use width:100%, max-width:480px and border-box so the card responds to its parent. Keep height automatic, wrap prose appropriately and allow code blocks to scroll independently. Check document width rather than judging only the center of a screenshot.

<style>.card{box-sizing:border-box;width:100%;max-width:480px;padding:24px;border:1px solid #ccd;overflow-wrap:anywhere}</style>
<article class="card">A flexible card with content-driven height.</article>

Further reading