How to prevent browsers from messing up your CSS

Browsers apply their own styles to HTML tags: for example, <h1> tags are bigger than <h2> tags, and both are bold, while paragraph text is smaller and isn’t bold; links are blue and underlined; and bulleted lists are indented. There’s nothing in the HTML standard that defines any of this formatting: Web browsers just add this formatting to make basic HTML more readable. However, even though browsers treat all tags roughly the same, they don’t treat them identically.

For example, Safari and Firefox use the padding property to indent bulleted lists, but Internet Explorer uses the margin property. Likewise, you’ll find subtle differences in the size of tags across browsers and an altogether confusing use of margins among the most common web browsers. Because of these inconsistencies, you can run into problems where, for instance, Firefox adds a top margin, while Internet Explorer doesn’t. These types of problems aren’t your fault—they stem from differences in the built-in browser styles.

To avoid cross-browser inconsistencies, it’s a good idea to start a style sheet with a clean slate. In other words, erase the built-in browser formatting and supply your own. The concept of erasing browser styling is called a CSS reset.


There’s a core set of styles you should include at the top of your style sheets. These styles set a baseline for properties that commonly are treated differently across browsers.

Here’s a bare-bones CSS reset:

html, body, h1, h2, h3, h4, h5, h6, p, ol, ul, li, pre, code, address, variable, form, fieldset, blockquote {
padding: 0;
margin: 0;
font-size: 100%;
font-weight: normal;
}
ol {
margin-left: 1.4em;
list-style: decimal;
}
ul {
margin-left: 1.4em;
list-style:square;
}
img {
border: 0;
}