A modern CSS reset is a dozen or so short rules placed before your own styles: border-box sizing on every element, zero default margins, a readable line height, block-level images capped at their container width, and form controls that inherit your font. Pick the rules you want below, then copy the result.
| Rule | Browser default it replaces | Why change it |
|---|---|---|
| box-sizing: border-box | content-box | Width then includes padding and border |
| margin: 0 | Margins on body, headings, p, lists | Spacing comes only from your own CSS |
| line-height: 1.5 on body | normal (roughly 1.2) | Easier reading for paragraphs |
| img { display: block; max-width: 100% } | Inline, natural width | No gap below images, no overflow |
| font: inherit on inputs and buttons | System font at a small size | Forms match the rest of the page |
Updated
Copying a reset you do not understand means debugging rules you never chose. This page explains each line in plain words and lets you build your own version with switches, so the file you paste is short and every line is there for a reason.
Default selection, wrapped in a cascade layer:
@layer reset {
/* Width and height include padding and border. */
*, *::before, *::after {
box-sizing: border-box;
}
/* Spacing comes only from your own rules. */
* {
margin: 0;
}
/* A taller line height and full-height body. */
body {
min-height: 100vh;
line-height: 1.5;
}
/* No baseline gap under images and no overflow. */
img, picture, video, canvas, svg {
display: block;
max-width: 100%;
}
/* Inputs and buttons match surrounding text. */
input, button, textarea, select {
font: inherit;
}
/* Long URLs wrap instead of overflowing. */
p, h1, h2, h3, h4, h5, h6 {
overflow-wrap: break-word;
}
/* Even line lengths for short headings. */
h1, h2, h3, h4, h5, h6 {
text-wrap: balance;
}
}| Approach | What it does | Good for |
|---|---|---|
| Classic hard reset | Strips almost every default, including heading sizes | Rarely needed today |
| normalize.css | Keeps defaults, fixes cross-browser differences | Content sites that like default typography |
| Short modern reset | Fixes sizing, margins, media and forms only | Most new sites and apps |
| Framework reset (Tailwind Preflight) | Ships with the framework | Projects already on that framework |
Both boxes say width: 200px. Only the second keeps that width once padding and border are added.
<style>
.box { width: 200px; padding: 20px; border: 6px solid #2563eb; margin: 8px 0; background: #eff6ff }
.sized { box-sizing: border-box }
</style>
<div class="box">content-box: 252px wide</div>
<div class="box sized">border-box: 200px wide</div>With the default content-box, a 300px wide card with 20px padding ends up 340px wide. border-box folds padding and border into the width you wrote, which is how most people expect sizing to behave.
Applying it to the ::before and ::after pseudo-elements as well keeps decorative shapes consistent with the boxes they decorate.
text-wrap: balance evens out the line lengths of short headings, and text-wrap: pretty avoids a single orphan word on the last line of a paragraph. Browsers that do not know these values simply ignore them, so they are safe to include.
overflow-wrap: break-word lets a long URL or code token break instead of pushing the page sideways on a phone.
A reset is not a design system. Colours, font families and spacing scales belong in your own base layer, where they can be changed without touching the reset.
Avoid rules that hurt accessibility, such as outline: none on everything or removing all animation for every visitor. Motion settings belong in a prefers-reduced-motion query.
A reset removes browser defaults so you start from a nearly blank page. normalize.css keeps useful defaults and only corrects the places where browsers disagree. Many current resets sit in between: they keep headings bold and lists intact but drop margins and fix sizing.
Browsers agree far more than they did, so the old giant resets are unnecessary. A short one is still worth having, because defaults such as content-box sizing, body margin and inline images are rarely what a layout wants.
:where() has zero specificity, so any later selector, even a bare element selector, overrides the reset. That stops reset rules from quietly winning over component styles.
Load it first, before any other stylesheet, or import it inside @layer reset at the top of your main CSS file and declare the layer order once with @layer reset, base, components.
Related: CSS box model and display, CSS selectors cheat sheet, Modern CSS features, BEM and CSS naming conventions, CSS minifier.
Start for free or see all free tools. We.Inc is free to start, with no card needed. AI building is on paid plans from $20 a month.
We.Inc is an AI-powered website builder you can resell under your own brand. Launch a branded client dashboard, bill on Stripe Connect, and deliver AI-generated websites in minutes. White-label plans start at $99 a month for 25 client sites, with a 7-day free trial and no per-site fees.