【前端技术文档】html标签默认属性

整理：徐秀、晋哲

时间：2015-11-20

说明：html标签默认可能影响布局的属性

1.页边距(<body>)

一般默认外边距为8px，根据不同浏览器有微小差别，通过设置:"margin:0;"消除。但body与其它block元素不同，它的background属性是从浏览器的左上角扩展到整个可见页面的。

重置代码: body{margin:0;}

2.段间距(<p>)

一般默认边距:"margin:16px;"通过重置 "margin:0;"消除。

3.标题样式(<h>标签)

h标签默认加粗:"font-weight:bold;"
h标签有默认边margin和font-size。根据不同浏览器有所不同，(ps：有文字的block的文字域都有大于font-size的高度。可以通过设置line-height:1;消除。)

4.列表样式 (<ul>/<ol>/<dl>)

4.1. 一般浏览器ul默认"list-style:disc;margin:16px;padding-left:40px;"

代码：

效果：

4.2. 一般浏览器ol默认"list-style:decimal;margin:16px;padding-left:40px;"；li的默认"display:list-item;"默认占据一行;

代码：

效果：

4.3. dl/dd/dt的默认"display:block;",dl默认"margin:16px;"dd的margin-left:40px;

代码：

效果：

5.表格默认属性(<table>)

table及其子元素默认属性较多，主要有如下。在布局中，我们只要重置：table{border-spacing:0;border-collapse:collapse;}【注：重置后，table自带的cellpadding、 cellspacing属性失效】
table及其子标签的display不可更改，否则可能会影响布局。
代码:效果：

6.输入标签默认属性(<input>/<button>/<textarea>等)

下面是webkit浏览器关于input及button的默认属性，其它浏览器有所差别，但是默认属性都不少【仅作了解，不要深究】需要注意的是input,button{display:inline-block;}

代码:

效果:

附录：

重置css代码:
body,h1,h2,h3,h4,h5,h6,p,form,ol,ul,dl,dd,fieldset{margin:0;padding:0;}
body,button,input,fieldset,select,textarea,p{font-family:Arial,"Microsoft Yahei","Hiragino Sans GB" ,"WenQuanYi Micro Hei",sans-serif;font-size:12px;}
ul,ol{list-style:none}
fieldset,img,input[type="button"],button,img{border:none;}
fieldset,button,textarea,select,input{outline:none;}
table{border-collapse:collapse;border-spacing:0}
img{-ms-interpolation-mode:bicubic;}