CSS Resets vs Normalize: Which Reset Should You Use in 2026?

Every browser ships with a built-in stylesheet that applies default margins, font sizes, and padding to HTML elements. These defaults differ across browsers and often get in the way. A CSS reset solves this — but there are several philosophies and the right choice depends on your project.

The problem CSS resets solve

Without a reset, a <h1> has different font-size and margin in Chrome vs Firefox vs Safari. A <ul> has browser-default bullets and padding. An <input> inherits font differently than a <p>. These inconsistencies compound across a project.

Resets address this in two ways:

• Zero everything — strip all defaults and start from a blank canvas (Eric Meyer approach)
• Normalise inconsistencies — fix only the differences between browsers, keep useful defaults (Normalize approach)

Eric Meyer Reset 2.0 (2011)

The classic. Sets every element's margin, padding, border, font-size, and font to zero or inherit.

html, body, div, span, h1, h2, h3, h4, h5, h6, p, blockquote,
pre, a, abbr, code, del, em, img, ins, kbd, s, samp, small,
strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, figure, figcaption, footer,
header, hgroup, menu, nav, output, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

Pros: predictable starting point, works cross-browser.
Cons: you have to redeclare everything — <ul> has no bullets, <strong> has no weight, <em> has no italics. Verbose for modern projects.

Best for: CSS frameworks that declare all styling explicitly; legacy cross-browser projects.

Normalize.css v8

Rather than zeroing defaults, Normalize.css makes them consistent across browsers. <h1> still has a large font-size, <strong> is still bold — but they behave the same in every browser.

/* Example rules from Normalize.css */
html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
}
sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

Pros: useful defaults are preserved; smaller than Meyer reset; targets real cross-browser bugs.
Cons: doesn't eliminate browser quirks entirely; you still write margin: 0 on body most of the time.

Best for: projects that use semantic HTML and want to preserve meaningful defaults.

Modern minimal reset (Josh Comeau, ~2020)

This ~10-line reset targets the pain points of modern web development specifically:

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
body { line-height: 1.5; -webkit-font-smoothing: antialiased; }
img, picture, video, canvas, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }

Key decisions explained:

Rule	Why
box-sizing: border-box	Padding and border are included in width — far more intuitive
margin: 0	Zero all margins and set them intentionally in your design system
font: inherit on inputs	Browser default fonts on form elements are inconsistent
display: block on images	Removes the mysterious 4px gap under inline images
overflow-wrap: break-word	Long URLs don't overflow containers

Pros: small, modern, easy to understand each rule.
Cons: doesn't fix all cross-browser inconsistencies (but most are irrelevant in 2026).

Best for: new projects without a CSS framework. The best choice for most developers today.

Tailwind Preflight

If you use Tailwind CSS, Preflight is applied automatically. It's an opinionated reset based on Normalize that also removes heading sizes, link colours, list styles, and button appearances — since Tailwind provides utility classes for all of these.

/* Tailwind Preflight removes heading styles */
h1, h2, h3, h4, h5, h6 {
  font-size: inherit;
  font-weight: inherit;
}
/* And list styles */
ol, ul, menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

Do not use Tailwind Preflight manually unless you're using Tailwind — it will remove defaults you rely on.

Comparison table

	Meyer	Normalize	Minimal	Tailwind Preflight
Year	2011	2011-2018	2020	2017-present
Approach	Zero	Normalise	Targeted	Opinionated
Size	~70 lines	~450 lines	~10 lines	~200 lines
Useful defaults kept	No	Yes	Partially	No (by design)
Best for	Legacy projects	Semantic HTML	Modern projects	Tailwind users

Recommendation for 2026

Use the minimal modern reset for new projects. It is small, every rule has a clear rationale, and it solves the layout problems you'll actually encounter with modern CSS (flexbox, grid, images). Reach for Normalize only if you need to maintain cross-browser support for IE11 or older. Meyer's reset is a historical artefact — modern browsers have converged enough that zeroing everything is overkill.

Use the CSS Reset Generator to copy the reset that's right for your project, then compress it with the CSS Minifier before production use.