# How Normalize.css v8.0.1 Differs from Traditional CSS Resets like Eric Meyer's > Discover how Normalize.css v8.0.1 differs from traditional CSS resets like Eric Meyer's. Normalize.css improves browser defaults and consistency, while resets create a blank slate. - Repository: [Nicolas Gallagher/normalize.css](https://github.com/necolas/normalize.css) - Tags: deep-dive - Published: 2026-03-07 --- **Normalize.css v8.0.1 preserves useful browser defaults while fixing cross-browser inconsistencies, whereas traditional CSS resets like Eric Meyer's strip virtually all native styling to create a blank slate.** Traditional CSS resets force developers to rebuild every style from scratch, but **Normalize.css v8.0.1** takes a targeted approach. As maintained in the [`necolas/normalize.css`](https://github.com/necolas/normalize.css/blob/main/necolas/normalize.css) repository, this modern alternative keeps sensible defaults intact while smoothing out browser quirks. Understanding how normalize.css differs from aggressive resets helps you choose the right foundation for your stylesheets. ## Core Philosophy: Preservation vs. Annihilation ### The "Zero-Out" Approach of Traditional Resets Traditional resets—most famously **Eric Meyer's reset**—employ a scorched-earth strategy. They apply `margin: 0; padding: 0; border: 0;` to virtually every HTML element, from headings to lists to form controls. This creates a completely unstyled canvas, but it also destroys useful typographic defaults that browsers provide, forcing you to redeclare basic styles like heading sizes and list bullets. ### The Normalization Philosophy **Normalize.css v8.0.1** follows a "modern alternative" philosophy: it preserves defaults that are already sensible and only intervenes to fix inconsistencies. Instead of resetting everything, it makes browsers render all elements more consistently while keeping ergonomically sound defaults—like maintaining `h1` font sizes at `2em` rather than reducing them to base size. ## Technical Implementation Differences ### Typography and Spacing Traditional resets override every element's box model. Eric Meyer's approach sets `margin: 0` and `padding: 0` on headings, paragraphs, lists, and blockquotes indiscriminately. In contrast, [`normalize.css`](https://github.com/necolas/normalize.css/blob/main/normalize.css) only removes the default body margin: ```css body { margin: 0; } ``` Headings retain their native semantic sizing. In [`normalize.css`](https://github.com/necolas/normalize.css/blob/main/normalize.css) at lines 40-44, the stylesheet preserves the user-agent defaults: ```css h1 { font-size: 2em; margin: 0.67em 0; } ``` The stylesheet also sets a corrective line-height on the root element rather than forcing a universal value. At lines 11-13, you'll find: ```css html { line-height: 1.15; /* 1. Correct the line height in all browsers. */ } ``` ### Form Elements Eric Meyer's reset strips form controls of all borders, margins, and native fonts, requiring complete reconstruction of button and input styling. Normalize.css v8.0.1 normalizes inheritance while preserving native UI aesthetics. At lines 60-68, the stylesheet ensures form elements inherit typography rather than using system defaults: ```css button, input, optgroup, select, textarea { font-family: inherit; /* 1 */ font-size: 100%; /* 1 */ line-height: 1.15; /* 1 */ margin: 0; /* 2 */ } ``` This approach keeps buttons looking like buttons and text inputs looking like text inputs across browsers, avoiding the "unstyled input" problem that requires extensive CSS repairs. ### HTML5 Semantic Elements Traditional resets treat semantic HTML5 elements—like `
`, `
`, and `
`—as generic blocks, often stripping their `display` properties. Normalize.css provides minimal but correct defaults for these elements. At lines 30-33, it ensures proper rendering in older browsers: ```css main { display: block; } ``` This maintains the semantic structure without forcing you to redeclare basic layout properties for modern HTML elements. ### Cross-Browser Bug Fixes While traditional resets focus solely on removing styles, Normalize.css v8.0.1 actively fixes known browser bugs. For example, Internet Explorer 10 adds unwanted borders to images inside links. At lines 48-50, Normalize.css explicitly removes these: ```css img { border-style: none; /* Remove the border on images inside links in IE 10. */ } ``` Similarly, it addresses font inheritance issues in `pre` elements and optical alignment corrections for `[type="checkbox"]` and `[type="radio"]`—issues that Eric Meyer's reset ignores because it assumes you'll rewrite all those styles anyway. ### Documentation and Maintainability Eric Meyer's reset provides minimal comments; it functions as a blunt, static tool that rarely changes. Normalize.css v8.0.1 treats documentation as a first-class feature. Every rule includes inline comments explaining the rationale, citing specific browsers and versions affected. As noted in the repository's [`CHANGELOG.md`](https://github.com/necolas/normalize.css/blob/main/CHANGELOG.md), the project receives regular updates to address emerging browser quirks, whereas traditional resets remain effectively frozen in time. ## Practical Code Comparison **Eric Meyer's Reset (excerpt):** ```css html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, 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, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } ``` **Normalize.css v8.0.1 implementation:** Simply link the CDN version to preserve useful defaults: ```html ``` Or import the source file where you can see the documented rules in [`normalize.css`](https://github.com/necolas/normalize.css/blob/main/normalize.css) explaining each fix. **Visual Result Differences:** - **`

` elements**: With Meyer's reset, headings lose their `2em` size and collapse to body text size unless you explicitly redefine them. Normalize.css preserves the hierarchical sizing at `2em` with proper `0.67em` vertical margins. - **Lists**: Traditional resets remove bullets from `
    ` and `
      `, requiring you to restore `list-style`. Normalize.css retains native bullets and only normalizes padding. - **Forms**: Meyer's reset eliminates all borders on buttons and inputs, creating flat, unclickable-looking elements. Normalize.css keeps native borders and styling while ensuring font consistency. - **Images in IE10**: Meyer's reset does not address the link-border bug; Normalize.css removes it automatically per lines 48-50. ## Summary - **Normalize.css v8.0.1** preserves useful browser defaults like heading sizes and list bullets, while Eric Meyer's reset strips them entirely. - The stylesheet targets specific cross-browser inconsistencies—such as IE10 image borders and form font inheritance—rather than resetting everything indiscriminately. - Only the `body` margin is zeroed out; other elements keep their semantic spacing (e.g., `h1` margins at `0.67em 0`). - Form elements inherit typography but retain native UI chrome, reducing the CSS you must write to restore usability. - Every rule includes inline documentation explaining browser-specific fixes, and the [`necolas/normalize.css`](https://github.com/necolas/normalize.css/blob/main/necolas/normalize.css) repository updates regularly via [`CHANGELOG.md`](https://github.com/necolas/normalize.css/blob/main/CHANGELOG.md) to address new browser quirks. ## Frequently Asked Questions ### Should I use Normalize.css v8.0.1 or a traditional CSS reset for new projects? Use **Normalize.css v8.0.1** for modern projects. It provides a more ergonomic starting point because you won't need to redeclare basic styles like heading hierarchies or list bullets. Traditional resets require significantly more boilerplate CSS to restore usability. ### Does Normalize.css increase file size compared to Eric Meyer's reset? The difference is negligible for modern web development. Normalize.css v8.0.1 weighs approximately 2KB minified and gzipped, while comprehensive resets are similar or larger. The maintenance savings from not having to rebuild default styles usually outweighs any byte-size concerns. ### Can I use Normalize.css alongside other CSS frameworks like Bootstrap or Tailwind? Yes. Many frameworks actually incorporate Normalize.css or similar logic internally. If you're building custom CSS, Normalize.css serves as an excellent base layer that won't conflict with component libraries, whereas aggressive resets might fight against framework assumptions. ### How does Normalize.css handle browser updates compared to static resets? According to the [`necolas/normalize.css`](https://github.com/necolas/normalize.css/blob/main/necolas/normalize.css) repository, the project tracks new browser versions through the [`CHANGELOG.md`](https://github.com/necolas/normalize.css/blob/main/CHANGELOG.md) and updates the stylesheet to address emerging quirks—such as new form control behaviors or flexbox bugs. Eric Meyer's reset is essentially static, requiring manual intervention if new browser inconsistencies appear.