關於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,