What is a CSS Reset?
A CSS reset is a short stylesheet that removes or normalizes the inconsistent default styles browsers apply to HTML elements, giving you a clean, predictable baseline to build on.
TL;DR
- 1.Every browser adds its own default styles (margins on
body, padding onul, etc.). These differ between Chrome, Firefox, and Safari. - 2.A CSS reset removes or normalizes these defaults so your site looks the same everywhere.
- 3.Modern resets are small (~20 lines) and typically set
box-sizing: border-box, remove margins, and fix image/form defaults. - 4.Tailwind CSS, Bootstrap, and most frameworks include a reset automatically.
Simple Explanation
Imagine three different paint stores each selling you a "white" canvas, but each store's version of white is slightly different -- one has a cream tint, another is pure white, the third has a slight blue cast.
That's what browser default styles are like. Chrome gives body an 8px margin. Firefox might render form elements differently. Safari handles font rendering its own way.
A CSS reset is like priming all those canvases with the exact same white paint before you start. Now every browser starts from the same baseline and your styles look consistent everywhere.
A Modern CSS Reset
Here's a minimal modern reset that fixes the most common pain points. Add this at the top of your stylesheet.
Copy-paste modern reset
/* Modern CSS Reset */
*, *::before, *::after {
box-sizing: border-box;
}
* {
margin: 0;
padding: 0;
}
html {
-moz-text-size-adjust: none;
-webkit-text-size-adjust: none;
text-size-adjust: none;
}
body {
min-height: 100vh;
line-height: 1.5;
}
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;
}
#root {
isolation: isolate;
}What Each Rule Does
box-sizing: border-boxMakes width/height include padding and border. Without this, a 200px element with 20px padding becomes 240px wide.
margin: 0; padding: 0Removes the default margins on body, headings, paragraphs, lists, etc. Gives you full control over spacing.
text-size-adjust: nonePrevents mobile browsers from automatically enlarging text in landscape mode.
min-height: 100vh on bodyEnsures the body always fills the viewport, which is useful for sticky footers and full-page layouts.
img { display: block; max-width: 100% }Prevents the annoying extra space below images (caused by inline display) and stops images from overflowing containers.
font: inherit on form elementsForm inputs don't inherit font styles by default. This rule makes buttons, inputs, and textareas use your body font.
overflow-wrap: break-wordPrevents long words or URLs from overflowing their containers. Essential for user-generated content.
Reset vs. Normalize
CSS Reset
- Strips all browser defaults to zero
- You style everything from scratch
- More predictable but more work
- Examples: Eric Meyer's Reset, Josh Comeau's Custom Reset
CSS Normalize
- Keeps useful defaults, fixes inconsistencies
- Less drastic -- headings still have sizes
- Less code to write on top of it
- Examples: normalize.css, modern-normalize
Most modern projects use a hybrid approach: a minimal reset that includes the best ideas from both. The reset above is this hybrid.
Common Mistakes
Don't
/* Using a heavy reset that strips
ALL styles, including useful ones
like list-style and heading sizes.
Then re-adding them all. */
* {
all: unset;
}Do
/* Use a targeted modern reset
that only fixes the real
pain points */
*, *::before, *::after {
box-sizing: border-box;
}
* { margin: 0; }Don't
/* Adding a CSS reset ON TOP of Tailwind (which already includes Preflight) -- now you have duplicate/conflicting resets */
Do
/* Check if your framework already includes a reset before adding your own. Tailwind, Bootstrap, and most CSS frameworks do. */
Inspect browser defaults on any element
Frontend Hero's CSS Scanner shows you every computed style on any element -- including browser defaults. See exactly what your reset is overriding.
Try CSS Scanner →Browser Support
CSS resets use basic CSS properties that are supported in all browsers. The properties used in modern resets (box-sizing, margin, padding, font inheritance) work in every browser including IE8+.
Related Tools
Frequently Asked Questions
A CSS reset strips all default browser styles to zero -- every element starts as a blank slate (no margins, no padding, no font sizes). CSS Normalize (normalize.css) takes a different approach: it preserves useful defaults while fixing inconsistencies across browsers. A reset gives you total control but more work; normalize gives you a consistent starting point with less code.
Tailwind CSS includes its own reset called Preflight, which is based on modern-normalize. It resets margins, sets box-sizing: border-box, removes list styles, and makes images block-level. So if you use Tailwind, you already have a CSS reset built in -- no need to add another one.
Yes, but use a modern minimal reset rather than the old 'nuclear' resets like Eric Meyer's from 2007. Modern resets are just 10-20 lines that fix the most common pain points: box-sizing, margin resets, image handling, and font inheritance. Frameworks like Tailwind and Bootstrap already include their own resets.
No, a CSS reset is typically 20-50 lines of CSS -- a negligible amount. The performance impact is essentially zero. The time you save debugging cross-browser inconsistencies far outweighs any theoretical overhead.
CSS Glossary
What is Flexbox?
One-dimensional layout model
What is CSS Grid?
Two-dimensional layout system
What is Z-Index?
Stacking order and contexts
What is Box-Sizing?
Control element sizing model
What is CSS Specificity?
How browsers resolve conflicts
What is the CSS Cascade?
Rule priority and inheritance
What is Box Shadow?
Add depth with shadow effects
What is Tailwind CSS?
Utility-first CSS framework
What is Responsive Design?
Adapt layouts to any screen