Navegadores não costumam ser muito consistentes uns com os outros em seus padrões. Se você não explicitar nenhum CSS para sua página, você certamente terá páginas diferentes no Firefox, Chrome ou Internet Explorer.
Para lidar com essas inconsistências, é costume colocar no começo do arquivo CSS uma série de instruções que “resetam” todos os valores. A menos que você especifique algo depois, a página deverá ser renderizada sempre daquela mesma forma, independente do navegador.
Eric Meyer, um dos gurus do CSS na web, criou um código CSS que você pode copiar e colar no seu projeto e funciona como um excelente ponto de partida para “resetar” os valores. Confira abaixo (com comentários traduzidos):
/* https://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
Licenciamento: nenhum (domínio público)
*/
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;
}
/* resetando a exibição de componentes do HTML5 para navegadores antigos */
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;
}
