Skip to content
GreenSnippets

A small modern CSS reset

Sensible defaults for box sizing, media, form fonts and text wrapping in a dozen lines.

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

body { margin: 0; line-height: 1.5; -webkit-font-smoothing: antialiased; }

img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }

input, button, textarea, select { font: inherit; color: inherit; }

p { text-wrap: pretty; }
h1, h2, h3, h4 { text-wrap: balance; line-height: 1.2; }

#root, #__next { isolation: isolate; }

Example / expected output

Output
/* Put this at the very top of your stylesheet. */

How it works

Not a full reset, just the defaults that cause the most surprises. border-box makes widths include padding, media elements stop overflowing their container, form controls inherit your font, and text-wrap improves headings and paragraphs.

This snippet has been reviewed but was not executed by an automated test. Test it in your own environment before relying on it.

Related snippets