Different browsers have different presentation default for CSS styles. This includes different top and bottom margins for headers, indentation, indent strategies for unordered lists, default line height, and much more. To spend less time struggling with browser default presentation differences, most CSS style sheets and CSS frameworks has a CSS reset included in them.
There are plenty of CSS reset examples out there. A simple one such as the following resets the margins for a bunch of elements. Put it at the top of your CSS file and it will do just fine for most occasions.
html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote, pre, form, fieldset, table, th, td {
margin: 0; padding: 0;
}If you want a more complete CSS reset I can recommend the YUI 2: Reset CSS.
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
margin:0;
padding:0;
}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset, img {
border:0;
}
address, caption, cite, code, dfn, em, strong, th, var {
font-style:normal;
font-weight:normal;
}
ol, ul {
list-style:none;
}
caption, th {
text-align:left;
}
h1, h2, h3, h4, h5, h6 {
font-size:100%;
font-weight:normal;
}
q:before, q:after {
content:'';
}
abbr, acronym {
border:0;
}If you want to put the reset in a separate file, give the file a name, e.g. reset.css and add the following to your header:
<link rel="stylesheet" type="text/css" href="http://yourdomain.com/locationofprojectscssfiles/reset.css">
The downside of having the CSS reset in a separate file is that you will get an extra HTTP request for retrieving the file. The upside on the other hand is that you can easily share the same CSS reset code between different projects. Just remember to include the line above in the header in such case.