A small reset – CSS Exercise with Solution

Write the reset that most projects begin with.

What to build

Three rules.

Requirements

*, *::before and *::after use box-sizing: border-box.
body has a margin of 0.
img is block, with a max-width of 100%.

Constraints

Keep it to these three rules.

Example

See the first code block in the lesson.

Why it works

These rules remove the differences that cause the most surprise: width arithmetic, a stray margin on the page, and the small gap under inline images.

Hints

Hint 1

Include the before and after pseudo-elements.

Hint 2

Images are inline by default.

Solution

Show one correct solution (try it yourself first)

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Reset</title>
  <style>
    *, *::before, *::after { box-sizing: border-box; }
    body { margin: 0; }
    img { display: block; max-width: 100%; }
  </style>
</head>
<body>
  <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'/%3E" alt="A dot" width="40" height="40">
</body>
</html>

Lesson: Keeping CSS maintainable →