很多网站在css reset 的时候有如下做法:
body, ul, ol, li, p, h1, h2, h3, h4, h5, h6, form, label, dl, dt, dd,fieldset, img {
  1. margin: 0;
  2. padding: 0;
  3. border: 0;
  4. list-style: none;
}
 
也许你有些许怀疑,上面列出的标签都有默认的 margin 和 padding 值么,是不是不管三七二十一,
就统统直接 margin:0 , padding:0  呢?
今天我们针对 body p ul ol dl dd 标签来做一个实验:
 
 

首先是 html 代码:

 
不加任何 css reset,只添加  ul,ol,dl{ width:200px; height:100px; border:1px solid #f00; }
我们看到在 chrome 下表现是这样的:
 
 
 
在 firefox  和 safari 下有相同的表现:
 

于是我们有如下总结:
1、body 水平垂直方向默认有 10px 的 margin 值;
2、p,ul,ol,dl 标签垂直方向默认有 20px 的 margin 值,且这几个标签之间 20px 间距不重复;
3、dd 标签在水平方向默认有 40px 的 margin 值;
4、ul,ol 标签水平方向默认有 40px 的 padding 值(ie6/7下无)。
 
 
添加如下样式后 firefox 下的表现:
body,p,ul,ol,dl,dd{ margin:0; }
ul,ol{ padding:0; list-style-position:inside; }
 
 
以上在 chrome 和 safari 下表现相同。
 
 
之所以对 ul,ol 添加 list-style-position:inside
是因为有如下发现:
1、ul,ol 设置 padding:0后,li 的项目符号(圆点或序号)消失,添加 list-style-position:inside 
    可恢复项目符号;
2、ul,ol 标签对其添加 width 后,ie6/7 下无项目符号(圆点或序号),添加 list-style-position:inside
    可恢复项目符号。
 
ie7 下表现如:
 

以上在 ie6 下表现相同,故不重复上图。
 
对 ul,ol 添加 list-style-position:inside 后,ie6下表现:
 

以上表现在 ie7 下相同。
 
 
 
综上所述,我们 css reset 时也许可以这样:
 
body, h1, ...,p, ul, ol, dl, dd{ margin:0; }
ul,ol{ padding:0; }


ps:因实验所用ie6、ie7浏览器为ieTester工具,故实验所得数据或结果可能不够准确,如有错误请批评支出。

css reset 以及哪些元素有默认margin padding值的更多相关文章

  1. 总结那些有默认margin,padding值的html标签

    一.h1~h6标签:有默认margin(top,bottom且相同)值,没有默认padding值. 在chrome中:16,15,14,16,17,19; 在firefox中:16,15,14,16, ...

  2. html标签默认属性值之margin;padding值

    一.h1~h6标签:有默认margin(top,bottom且相同)值,没有默认padding值. 在chrome中:16,15,14,16,17,19; 在firefox中:16,15,14,16, ...

  3. ul标签在FF中默认只有padding值(即:padding-left:40px)

  4. CSS Reset(样式重置)

    CSS Reset,意为重置默认样式.HTML中绝大部分标签元素在网页显示中都有一个默认属性值,通常为了避免重复定义元素样式,需要进行重置默认样式(CSS Reset).举几个例子:1.淘宝(CSS ...

  5. 由css reset想到的深入理解margin及em的含义

    由css reset想到的深入理解margin及em的含义 原文地址:http://www.ymblog.net/content_189.html 经常看到这样语句,*{ margin:0px;pad ...

  6. 常见标签的默认属性值及相互作用——关于CSS reset的思考

    在现在的网站设计中使用reset.css用重置整个站点的标签的CSS属性的做法很常见,但有时候我们已经为了reset而reset,我们经常看到这样的reset代码 div{ padding:0px; ...

  7. 重置浏览器的默认样式(css reset)

    (1)定义:首先css reset指的是重置浏览器的默认样式 (2)作用:因为现在的浏览器很多,并且每个浏览器都有自己的默认样式,这样就会导致一个页面在多个浏览器下展示产生差异,所以我们需要做一些处理 ...

  8. css中的默认margin

    上班打酱油中,你懂的; body的margin为8px; webkit默认行高18px:height18px; 默认font-size16px p默认margin是16px 0 16px 0; ul和 ...

  9. 默认样式重置 (css reset)

    body,p,h1,h2,h3,h4,h5,h6,dl,dd,t{margin:0; font-size:12px;/* font-family:XX; */} ol,ul{list-style:no ...

随机推荐

  1. git 常用命令总结。

    引用:http://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000/00137396284551 ...

  2. linux的find指令详解。

    引用:http://os.51cto.com/art/200908/141411.htm http://www.oschina.net/translate/15-practical-linux-fin ...

  3. mybatis使用order by注意

    直接用动态参数生成,不会排序: <if test="orderColumn!=null and orderColumn != ''"> ORDER BY #{order ...

  4. javascript中with语句应用

    语法格式: with(obj){} obj指明了语句组中对象缺省时的参考对象,就是代表该语句块中的默认作用域为obj. <html> <head> <title>& ...

  5. 代码设置layout_weight attribute

    代码设置 LinearLayout权重比例之小结: 如果在LinearLayout添加子View,那么只有一个View的时候设置所占的比例一定要设置LinearLayout总weightsum.不然会 ...

  6. Dragon Balls--hdu3635(并查集)

    Dragon Balls Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Tota ...

  7. Ice_cream's world I--hdu2120

    Ice_cream's world I Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Othe ...

  8. Lwip lwip_recvfrom函数一个数据包不能分多次读取。

    最近在写一个基于Lwip协议栈的网络程序,对于一包数据,想先获得包头信息,再根据包头信息读取后面的数据,但是调用recvfrom后,发现读取后面的数据读取不到,进一步查阅发现,原来对于UDP协议,一次 ...

  9. Nginx 变量漫谈(二)

    关于 Nginx 变量的另一个常见误区是认为变量容器的生命期,是与 location 配置块绑定的.其实不然.我们来看一个涉及“内部跳转”的例子:     server {        listen ...

  10. 工作无聊,闲来无事,自己学习 android入门

    工作无聊,闲来无事,自己学习. 最近几天看了看有关android的UI设计,布局以及android有关控件的知识,算是进一步了解了 android的相关内容. 明天就是周末了,明天及后天,我打算开始学 ...