Fighting Browser Inheritance

Every browser (Chrome, Safari, Firefox) has its own " default styles " (User Agent Styles). For example, buttons have different borders, and lists have different margins. To make the site look the same everywhere, we must " reset " these differences.

1. CSS Reset

Harshly removes all standard margins, borders, and styling. You start with a clean slate.

* { margin: 0; padding: 0; box-sizing: border-box; }

2. Normalize.css

Doesn't remove styles completely, but brings them to a unified standard across all browsers. For example, makes h1 the same height everywhere.

3. Modern Approach: " Modern Reset "

Instead of removing everything, developers write small rules that make work comfortable (e.g., improving image and list display).

Caution

Never start a project without some form of reset. Otherwise, small 5-10 pixel differences between Chrome and Safari will drive you crazy in final development stages.