Because each browser has its own default style rules that it uses for styling a lot of different HTMl elements, using a CSS reset is a great way to get rid of inherent and default browser styling that can get in the way of cross-browser compatibility. By using a reset, you’re essentially giving yourself a blank-slate on each browser, and this allows you to style your elements is exactly as you want them without them looking different depending on which browser is being used to view them.
One of the most popular and comprehensive CSS reset used is the Eric Meyer CSS reset. This resets the margins, borders, padding, and font-size of many different elements so they’re all at the same baseline, in addition to resetting a few other elements and properties. You can use this rest as-is or you can customize it to your liking — just be careful not to go too crazy with it, you could end up getting rid of some default styling that you may have wanted to keep.
You can take a look at the reset below, and copy and paste it into your projects as needed:
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}