关于reset.css的疑问：为什么一定要重置浏览器样式？

自开始做前端算起，我所做过的每一个项目中都会有一个reset.css，也就是重置样式表。我现在想想都不知道第一次是从哪儿弄来的一个重置样式表。快五年了，好像从来都没有质疑过关于重置样式表的内容。

这样一个样式表里往往会有一大段对“浏览器样式”的清除与重置。刚开始做前端的时候一度感觉，能写出来这么一个样式表似乎很酷、很牛；做时间久了，也自己开始针对不同项目写自己的reset.css了，但也不外乎是一大堆重置样式，有时候都不关心浏览器里每个元素有什么样的默认样式，只是唯恐漏掉哪个元素没有把样式重置掉；其实在添加的的一些标签里，都不知道浏览器的默认样式是什么就一味的添进去了。只是感觉好酷，汗～

到了今天，感觉好多东西，似乎有点追求形式了。查了好多关于浏览器默认样式的资料以后，发现我们写的一大堆重置样式里好多其实不需要重置，而且似乎根本不明白重置的原因与目的。于是我开始查reset的来源，后来在张鑫旭的博客里看到了这么一段内容：

1. div,address标签默认有margin值吗？有padding值吗？怎么会想到应用address,div{margin:0; padding:0;}属性呢？真是画蛇添足，多此一举。

2. dt标签有默认的margin与padding值就是0，这里为什么还要使用呢？

3. li标签默认有margin值吗？有padding值吗？压根就没有，也不自己测测，还没事找事设置个li{margin:0; padding:0;}属性，真是衰！

4. code标签是个属于inline水平的元素，居然也扯到margin与padding的重置，真是好笑。

5. fieldset, legend这两个90年代的标签你的网站上使用了吗？使用概率不足1%的标签也拿来重置，我实在无语了。

6. 还有th，td这些标签，幸好没有写上table与tr标签，否则我一起痛批一段。

另：经测试article, aside, footer, header, hgroup, main, nav, section, dt, summary, details这些标签也没有默认的margin与padding值。

据淘宝的射雕的叙述，最早的一份CSS resest来自Tantek 的undohtml.css，很简单的代码，Tantek 根据自己的需要，对浏览器的默认样式进行了一些重置。其余一些有名的CSS reset如业界领袖Eric Meyer的reset，或是Tripoli Reset。

这里附上undohtml.css:

@charset "utf-8";
/* CSS Document */
/* undohtml.css @author:Tantek */
/* (CC) 2004 Tantek Celik. Some Rights Reserved.             */
/*   http://creativecommons.org/licenses/by/2.0                   */
/* This style sheet is licensed under a Creative Commons License. */

/* Purpose: undo some of the default styling of common (X)HTML browsers */

/* link underlines tend to make hypertext less readable,
because underlines obscure the shapes of the lower halves of words */
:link,:visited { text-decoration:none }

/* no list-markers by default, since lists are used more often for semantics */
ul,ol { list-style:none }

/* avoid browser default inconsistent heading font-sizes */
/* and pre/code too */
h1,h2,h3,h4,h5,h6,pre,code { font-size:1em; }

/* remove the inconsistent (among browsers) default ul,ol padding or margin  */
/* the default spacing on headings does not match nor align with
normal interline spacing at all, so let's get rid of it. */
/* zero out the spacing around pre, form, body, html, p, blockquote as well */
/* form elements are oddly inconsistent, and not quite CSS emulatable. */
/*  nonetheless strip their margin and padding as well */
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input
{ margin:0; padding:0 }

/* whoever thought blue linked image borders were a good idea? */
a img,:link img,:visited img { border:none }

/* de-italicize address */
address { font-style:normal }

/* more varnish stripping as necessary... */

CSS reset的作用是让各个浏览器的CSS样式有一个统一的基准，而这个基准更多的就是“清零”。但“清零”的目的是避免不同浏览器有不同的默认样式而导致有bug产生；所以，有时候我们对很多标签做的一些清零，其实是没什么意义的，说的不好听一点，是盲目跟风。

张鑫旭认为css reset应该是这样的：

body, dl, dd, h1, h2, h3, h4, h5, h6, p, form{margin:0;}

ol,ul{margin:0; padding:0;}

我也觉得这些足够了。其余的中在样式里原本就可以设置了，不然会多出很多重置的样式，徒增样式量，毫无用处。

鉴于没有实践就没有发言权的说法，我自己测试了一下chrome浏览器的默认样式（有大把自由时间的童鞋们，也去自己测试一下收获颇丰～）：

@charset "utf-8";
/* chrome default CSS Document */
html, address, div, p, article, aside, footer, header, hgroup, main, nav, section, dt, summary, details, figcaption, frameset, frame{display:block;}
head, meta, title, link, style, script, datalist, noframes{display:none;}
map, area, output, q{display:inline;}
{display:none;}
body{display:block;margin:8px;}
a:-webkit-any-link{
color:-webkit-link;
text-decoration:underline;
cursor:auto;
}
/*无样式的标签：
abbr,acronym(HTML不支持此标签),img, base, basefont, br, canvas, embed, font, noscript, object, span, time, wbr
*/
pre, xmp, plaintext, listing {
display: block;
font-family: monospace;
white-space: pre;
margin: 1em 0px;
}
mark {
background-color: yellow;
color: black;
}
sub {
vertical-align: sub;
font-size: smaller;
}
sup {
vertical-align: super;
font-size: smaller;
}
i, cite, em, var, address, dfn{
font-style:italic;
}
strong, b {
font-weight: bold;
}
/*address{
display:block;
}*/
center {
display: block;
text-align: -webkit-center;
}
u, ins {
text-decoration: underline;
}
s, strike, del {
text-decoration: line-through;
}
big {
font-size: larger;
}
small {
font-size: smaller;
}
bdi, output { /*//////////////////////////////////////////////////////////*/
unicode-bidi: -webkit-isolate;
}
/*output {
display: inline;
}*/
/*q {
display: inline;
}*/
q::before {
content: open-quote;
}
q::after {
content: close-quote;
}
ruby, rt {
text-indent: 0px;
}
rt {
line-height: normal;
-webkit-text-emphasis: none;
}
ruby > rp { /*rt、rp：一个ruby注释*/
display: none;
}
bdo {
unicode-bidi: bidi-override;
}
tt, code, kbd, samp {
font-family: monospace;
}
blockquote {
display: block;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 40px;
-webkit-margin-end: 40px;
}
p{
display:block;
-webkit-margin-before:1em;
-webkit-margin-after:1em;
-webkit-margin-start:0px;
-webkit-margin-end:0px;
}
audio {
width: 300px;
height: 30px;
}
video {
object-fit: contain;
}
audio::-webkit-media-controls-timeline, video::-webkit-media-controls-timeline {
-webkit-appearance: media-slider;
display: flex;
flex: 1 1 auto;
height: 8px;
margin: 0px 15px 0px 0px;
padding: 0px;
background-color: transparent;
min-width: 25px;
border: initial;
color: inherit;
}
form {
display: block;
margin-top: 0em;
}
/*datalist{
display:none;
}*/
input[type="range" i] {
-webkit-appearance: slider-horizontal;
padding: initial;
border: initial;
margin: 2px;
color: rgb(144, 144, 144);
}

input, input[type="password" i], input[type="search" i] {
-webkit-appearance: textfield;
padding: 1px;
background-color: white;
border: 2px inset;
border-image-source: initial;
border-image-slice: initial;
border-image-width: initial;
border-image-outset: initial;
border-image-repeat: initial;
-webkit-rtl-ordering: logical;
-webkit-user-select: text;
cursor: auto;
}
input[type="button" i], input[type="submit" i], input[type="reset" i], input[type="file" i]::-webkit-file-upload-button, button {
align-items: flex-start;
text-align: center;
cursor: default;
color: buttontext;
padding: 2px 6px 3px;
border: 2px outset buttonface;
border-image-source: initial;
border-image-slice: initial;
border-image-width: initial;
border-image-outset: initial;
border-image-repeat: initial;
background-color: buttonface;
box-sizing: border-box;
}
input, textarea, keygen, select, button {
margin: 0em;
font: -webkit-small-control;
color: initial;
letter-spacing: normal;
word-spacing: normal;
text-transform: none;
text-indent: 0px;
text-shadow: none;
display: inline-block;
text-align: start;
}
input, textarea, keygen, select, button, meter, progress {
-webkit-writing-mode: horizontal-tb;
}
textarea {
font-family: monospace;
border-color: rgb(169, 169, 169);
}
textarea {
-webkit-appearance: textarea;
background-color: white;
border: 1px solid;
border-image-source: initial;
border-image-slice: initial;
border-image-width: initial;
border-image-outset: initial;
border-image-repeat: initial;
-webkit-rtl-ordering: logical;
-webkit-user-select: text;
flex-direction: column;
resize: auto;
cursor: auto;
padding: 2px;
white-space: pre-wrap;
word-wrap: break-word;
}
progress {
-webkit-appearance: progress-bar;
box-sizing: border-box;
display: inline-block;
height: 1em;
width: 10em;
vertical-align: -0.2em;
}
meter {
-webkit-appearance: meter;
box-sizing: border-box;
display: inline-block;
height: 1em;
width: 5em;
vertical-align: -0.2em;
}
button {
-webkit-appearance: button;
}
select {
-webkit-appearance: menulist;
box-sizing: border-box;
align-items: center;
border: 1px solid;
border-image-source: initial;
border-image-slice: initial;
border-image-width: initial;
border-image-outset: initial;
border-image-repeat: initial;
white-space: pre;
-webkit-rtl-ordering: logical;
color: black;
background-color: white;
cursor: default;
}
optgroup {
font-weight: bolder;
display: block;
}
option {
font-weight: normal;
display: block;
padding: 0px 2px 1px;
white-space: pre;
min-height: 1.2em;
font: inherit;
}
keygen, select {
border-radius: 5px;
}
keygen, select, select[size="0"], select[size="1"] {
border-radius: 0px;
border-color: rgb(169, 169, 169);
}
label {
cursor: default;
}
table {
display: table;
border-collapse: separate;
border-spacing: 2px;
border-color: gray;
}
caption {
display: table-caption;
text-align: -webkit-center;
}
tbody {
display: table-row-group;
vertical-align: middle;
border-color: inherit;
}
tfoot {
display: table-footer-group;
vertical-align: middle;
border-color: inherit;
}
tr {
display: table-row;
vertical-align: inherit;
border-color: inherit;
}
td, th {
display: table-cell;
vertical-align: inherit;
}
th {
font-weight: bold;
}
colgroup {
display: table-column-group;
}
col {
display: table-column;
}
dialog {
position: absolute;
left: 0px;
right: 0px;
width: -webkit-fit-content;
height: -webkit-fit-content;
margin: auto;
border: solid;
border-image-source: initial;
border-image-slice: initial;
border-image-width: initial;
border-image-outset: initial;
border-image-repeat: initial;
padding: 1em;
background: white;
color: black;
}
dialog::backdrop {
position: fixed;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
background: rgba(0, 0, 0, 0.0980392);
}
ul, menu, dir {
display: block;
list-style-type: disc;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 40px;
}
ol {
display: block;
list-style-type: decimal;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 40px;
}
li {
display: list-item;
text-align: -webkit-match-parent;
}
dl {
display: block;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
}
/*dt {
display: block;
}*/
dd {
display: block;
-webkit-margin-start: 40px;
}

fieldset {
display: block;
-webkit-margin-start: 2px;
-webkit-margin-end: 2px;
-webkit-padding-before: 0.35em;
-webkit-padding-start: 0.75em;
-webkit-padding-end: 0.75em;
-webkit-padding-after: 0.625em;
border: 2px groove threedface;
border-image-source: initial;
border-image-slice: initial;
border-image-width: initial;
border-image-outset: initial;
border-image-repeat: initial;
min-width: -webkit-min-content;
}
legend {
display: block;
-webkit-padding-start: 2px;
-webkit-padding-end: 2px;
border: none;
border-image-source: initial;
border-image-slice: initial;
border-image-width: initial;
border-image-outset: initial;
border-image-repeat: initial;
}
figure {
display: block;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 40px;
-webkit-margin-end: 40px;
}
figcaption {
display: block;
}
frameset {
border-color: inherit;
}
/*frameset, frame {
display: block;
}*/
h1 {
display: block;
font-size: 2em;
-webkit-margin-before: 0.67em;
-webkit-margin-after: 0.67em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
font-weight: bold;
}
:-webkit-any(article,aside,nav,section) h1 {
font-size: 1.5em;
-webkit-margin-before: 0.83em;
-webkit-margin-after: 0.83em;
}
h2 {
display: block;
font-size: 1.5em;
-webkit-margin-before: 0.83em;
-webkit-margin-after: 0.83em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
font-weight: bold;
}
h3 {
display: block;
font-size: 1.17em;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
font-weight: bold;
}
h4 {
display: block;
-webkit-margin-before: 1.33em;
-webkit-margin-after: 1.33em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
font-weight: bold;
}
h5 {
display: block;
font-size: 0.83em;
-webkit-margin-before: 1.67em;
-webkit-margin-after: 1.67em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
font-weight: bold;
}
h6 {
display: block;
font-size: 0.67em;
-webkit-margin-before: 2.33em;
-webkit-margin-after: 2.33em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
font-weight: bold;
}
hr {
display: block;
-webkit-margin-before: 0.5em;
-webkit-margin-after: 0.5em;
-webkit-margin-start: auto;
-webkit-margin-end: auto;
border-style: inset;
border-width: 1px;
}
iframe {
border: 2px inset;
border-image-source: initial;
border-image-slice: initial;
border-image-width: initial;
border-image-outset: initial;
border-image-repeat: initial;
}

另附上通过查找到的资料总结的一些浏览器的margin值与padding值（没有一一测试，有兴趣的可以自己测试一下）：

IE-7:
有默认外边距margin样式的元素：
dd，menu, ol, ul, blockquote, body, dd, dl, form, h1-6, ul
有默认内边距padding样式的元素：
th, td, textarea, input, fieldset, caption,

IE-8:
有默认外边距margin样式的元素：
dd, menu, ol, ul,  blockquote, body, dd, dl,fieldset, h1-6, hr, p, pre,
有默认内边距padding样式的元素：
ul, th, textarea, td, ol, menu, legend, input, fieldset, button, [dir=rtl] ul, [dir=rtl] ol, [dir=rtl] menu

IE-9:
有默认外边距margin样式的元素(与IE-8的默认样式一样)：
dd, menu, ol, ul, blockquote, body, dd, dl, fieldset, h1-6, hr, p, pre,
有默认内边距padding样式的元素：
ul, th, textarea, td, ol, menu, legend, input, fieldset, button, [dir=rtl] ul, [dir=rtl] ol, [dir=rtl] menu

webkit:(ol ul, ul ol, ul ul, ol ol{margin-top:0;margin-bottom:0;}),
有默认外边距margin样式的元素：
body, p, blockquote, hr, h1-6, ul, ol, menu, dir, dd(margin-start), dl, form, fieldset, input, textarea, keygen, select, button, isindex, datagrid, pre, xmp, plaintext, listing,
有默认内边距padding样式的元素：
input, textarea, fieldset, legend

opera:
有默认外边距margin样式的元素：
body, blockquote, dd, dl, fieldset, h1-6, hr, menu, p, pre, ul
有默认内边距padding样式的元素：
ul, th, td, textarea, select, ol, menu, legend, keygen, input, fieldset, button, address,