Why use box-sizing: border-box?

border-box makes width and height include padding and border, so a 300px element with padding is still 300px wide. The default content-box excludes padding from the width calculation.

Should I use a reset or normalize.css?

A reset removes all defaults for maximum control. normalize.css preserves useful defaults and fixes cross-browser inconsistencies. Modern projects often use a minimal custom reset.

Does a CSS reset affect third-party component libraries?

It can. Aggressive resets may strip styles that component libraries depend on. Scope the reset to your own components or use a lighter-touch reset that only targets known problem properties.

Format a CSS Reset Stylesheet

A CSS reset removes browser default styles so your own styles apply consistently across all browsers. Modern resets are minimal compared to old approaches like normalize.css, targeting only the most impactful inconsistencies. This example includes box-sizing, margin removal, and typography defaults that modern apps need. Format it to keep your base stylesheet readable and easy to update.

Example

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body { min-height: 100vh; line-height: 1.5; font-family: system-ui, sans-serif; -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; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }

[ open in CSS Formatter → ]

FAQ

Why use box-sizing: border-box?: border-box makes width and height include padding and border, so a 300px element with padding is still 300px wide. The default content-box excludes padding from the width calculation.
Should I use a reset or normalize.css?: A reset removes all defaults for maximum control. normalize.css preserves useful defaults and fixes cross-browser inconsistencies. Modern projects often use a minimal custom reset.
Does a CSS reset affect third-party component libraries?: It can. Aggressive resets may strip styles that component libraries depend on. Scope the reset to your own components or use a lighter-touch reset that only targets known problem properties.

Related Examples

Format a CSS Custom Properties File

CSS custom properties (variables) defined on :root create a design token system ...

Format CSS Media Queries

Mobile-first media queries start with styles for small screens and layer on addi...

Format a Semantic HTML Page Structure

Semantic HTML uses elements that describe meaning rather than just presentation,...