Include padding in element sizing

Apply the border-box model to elements and pseudo-elements.

Official sourceW3C CSS Sizing — box-sizingReviewed: 2026-08-26

STEP 1 · LEARN

How it works

With box-sizing: border-box, the declared size includes padding and border. A shared rule for elements and pseudo-elements makes layout calculations more predictable.

Correct example

*, *::before, *::after { box-sizing: border-box; }

A 100%-wide card does not grow beyond its container merely because padding is added.

Common mistake

* { box-sizing: content-box; }

content-box adds padding and border outside the declared size and does not meet the exercise objective.

STEP 2 · APPLY

Your exercise

For *, *::before and *::after, set box-sizing: border-box in one rule.

index.htmlCSS

Safe resultisolated

The draft stays only in this browser.HTML and CSS allowed · scripts and network blocked

STEP 4 · CHECK

What needs to pass

0%not checked

The complete list uses border-box.
The target element is present in the page.

Explain the solution logic

The selector list applies the declaration to all elements and both generated pseudo-element types.

How it works

Your exercise

Write and see the result

What needs to pass