Modern CSS reset
A focused reset that fixes box-sizing, media overflow, and form font inheritance — without nuking all defaults.
Heading
A paragraph of text with default browser line-height and margin.
- List item one
- List item two
Heading
A paragraph of text with consistent line-height and no margin.
- List item one
- List item two
Quick implementation
/* 1. Consistent box model across all elements */
*, *::before, *::after {
box-sizing: border-box;
}
/* 2. Remove default body margin; set min viewport height and readable line-height */
body {
margin: 0;
min-height: 100svh;
line-height: 1.5;
}
/* 3. Prevent media from overflowing their container */
img, picture, video, canvas, svg {
display: block;
max-width: 100%;
}
/* 4. Form elements inherit typography — browsers default to system UI */
input, button, textarea, select {
font: inherit;
}
/* 5. Avoid text overflow in headings and paragraphs */
p, h1, h2, h3, h4, h5, h6 {
overflow-wrap: break-word;
}
/* 6. Improve text rendering */
body {
-webkit-font-smoothing: antialiased;
}
Prompt this to your LLM
Includes role, constraints, two framework variants, and edge cases to handle.
You are a senior frontend engineer setting up a new web project from scratch.
Goal: Write a modern CSS reset — minimal, targeted, and safe for production.
Technical constraints:
- Use box-sizing: border-box on *, *::before, *::after — the single most impactful reset rule.
- Set body { margin: 0; min-height: 100svh; line-height: 1.5; }.
- Prevent media overflow: img, picture, video, canvas, svg { display: block; max-width: 100%; }.
- Fix form font inheritance: input, button, textarea, select { font: inherit; }.
- Add overflow-wrap: break-word on all text elements to prevent layout breakage.
- Do NOT reset all margins and paddings to zero (that destroys accessible list styles and heading hierarchy).
- Use oklch() for any demo colors, not hex or rgba().
Framework variant (pick one):
A) Standalone CSS file — a reset.css meant to be imported first in any project.
B) CSS @layer integration — wrap the reset in @layer reset { ... } as the lowest-priority layer.
Edge cases to handle:
- 100svh vs 100vh: use svh to account for mobile browser chrome shrinking the viewport.
- -webkit-font-smoothing: antialiased improves text rendering on macOS but is non-standard — include it with a comment.
- The reset should not remove list styles (that breaks accessibility for nav elements that use <ul>) — leave those to base or component layers.
Return CSS only.
Why this matters in 2026
Browser defaults were designed in an era before responsive layouts and design systems. box-sizing: content-box means padding expands element dimensions unexpectedly. Form elements inherit font: system-ui instead of your project font. Images are inline by default, causing a gap at the bottom of containers. This reset corrects these inconsistencies without overriding everything — unlike normalize.css or the old Eric Meyer reset, it only touches what reliably needs fixing.
The logic
Each rule in this reset has a specific rationale. box-sizing: border-box makes width and height calculations predictable — adding padding no longer changes an element's outer size. min-height: 100svh uses the small viewport height unit, which accounts for mobile browsers where the address bar shrinks the viewport dynamically. font: inherit on form elements forces them to use your document font instead of the browser's default system-ui, which differs between operating systems.
display: block on media elements removes the inline baseline gap. overflow-wrap: break-word prevents long words or URLs from breaking out of their container and causing horizontal scroll.
Accessibility & performance
Avoid the temptation to add list-style: none to ul and ol in your reset. Safari's VoiceOver does not announce lists that have their list-style removed — a known accessibility regression. If you need unstyled lists in components, remove the style in the component layer, not the reset. This reset has zero JavaScript and zero layout cost — all rules are applied during initial style computation.