常用元素默认margin和padding值问题探讨

关于默认元素在不同浏览器中的margin值是多少的问题,今天做了一个探讨

复制代码

代码如下:

// body的margin值 
firefox 20.0 ----------------------- body的margin为: margin:8px 8px 8px 8px; 
Internet Explorer 6.0 ----------- body的margin为: margin:15px 10px 15px 10px; 
Internet Explorer 7.0 ----------- body的margin为: margin:16px 11px 16px 11px; 
Internet Explorer 8.0-10.0 ---- body的margin为: margin:16px 8px 16px 8px; 
Opera 12.11 --------------------- body的margin为: margin:16px 8px 16px 8px; 
Safari 5.1 ------------------------- body的margin为: margin:16px 8px 16px 8px; 
Google Chrome 27.0 --------- body的margin为: margin:16px 8px 16px 8px;

// h1的margin值 
firefox 20.0 ----------------------- h1的margin为: margin:21px 0 22px 0; 
Internet Explorer 6.0 ----------- h1的margin为: margin:19px 0 19px 0; 
Internet Explorer 7.0 ----------- h1的margin为: margin:19px 0 19px 0; 
Internet Explorer 8.0-10.0 ---- h1的margin为: margin:20px 0 20px 0; 
Opera 12.11 --------------------- h1的margin为: margin:21px 0 21px 0; 
Safari 5.1 ------------------------- h1的margin为: margin:21px 0 21px 0; 
Google Chrome 27.0 --------- h1的margin为: margin:21px 0 22px 0;

// h2的margin值 
firefox 20.0 ----------------------- h2的margin为: margin:20px 0 20px 0; 
Internet Explorer 6.0 ----------- h2的margin为: margin:19px 0 19px 0; 
Internet Explorer 7.0 ----------- h2的margin为: margin:19px 0 19px 0; 
Internet Explorer 8.0-10.0 ---- h2的margin为: margin:20px 0 20px 0; 
Opera 12.11 --------------------- h2的margin为: margin:19px 0 19px 0; 
Safari 5.1 ------------------------- h2的margin为: margin:19px 0 19px 0; 
Google Chrome 27.0 --------- h2的margin为: margin:20px 0 20px 0;

// h3的margin值 
firefox 20.0 ----------------------- h3的margin为: margin:19px 0 18px 0; 
Internet Explorer 6.0 ----------- h3的margin为: margin:19px 0 19px 0; 
Internet Explorer 7.0 ----------- h3的margin为: margin:19px 0 19px 0; 
Internet Explorer 8.0-10.0 ---- h3的margin为: margin:19px 0 18px 0; 
Opera 12.11 --------------------- h3的margin为: margin:18px 0 18px 0; 
Safari 5.1 ------------------------- h3的margin为: margin:18px 0 18px ; 
Google Chrome 27.0 --------- h3的margin为: margin:19px 0 18px 0;

// h4的margin值 
firefox 20.0 ----------------------- h4的margin为: margin:22px 0 21px 0; 
Internet Explorer 6.0 ----------- h4的margin为: margin:19px 0 19px 0; 
Internet Explorer 7.0 ----------- h4的margin为: margin:19px 0 19px 0; 
Internet Explorer 8.0-10.0 ---- h4的margin为: margin:22px 0 21px 0; 
Opera 12.11 --------------------- h4的margin为: margin:16px 0 16px 0; 
Safari 5.1 ------------------------- h4的margin为: margin:21px 0 21px 0; 
Google Chrome 27.0 --------- h4的margin为: margin:22px 0 21px 0;

// h5的margin值 
firefox 20.0 ----------------------- h5的margin为: margin:22px 0 22px 0; 
Internet Explorer 6.0 ----------- h5的margin为: margin:19px 0 19px 0; 
Internet Explorer 7.0 ----------- h5的margin为: margin:19px 0 19px 0; 
Internet Explorer 8.0-10.0 ---- h5的margin为: margin:22px 0 22px 0; 
Opera 12.11 --------------------- h5的margin为: margin:22px 0 22px 0; 
Safari 5.1 ------------------------- h5的margin为: margin:22px 0 22px 0; 
Google Chrome 27.0 --------- h5的margin为: margin:22px 0 22px 0;

// h6的margin值 
firefox 20.0 ----------------------- h6的margin为: margin:25px 0 25px 0; 
Internet Explorer 6.0 ----------- h6的margin为: margin:19px 0 19px 0; 
Internet Explorer 7.0 ----------- h6的margin为: margin:19px 0 19px 0; 
Internet Explorer 8.0-10.0 ---- h6的margin为: margin:25px 0 25px 0; 
Opera 12.11 --------------------- h6的margin为: margin:24px 0 24px 0; 
Safari 5.1 ------------------------- h6的margin为: margin:24px 0 24px 0; 
Google Chrome 27.0 --------- h6的margin为: margin:28px 0 28px 0;

// dl的margin值 
firefox 20.0 ----------------------- dl的margin为: margin:16px 0 16px 0; 
Internet Explorer 6.0 ----------- dl的margin为: margin:19px 0 19px 0; 
Internet Explorer 7.0 ----------- dl的margin为: margin:19px 0 19px 0; 
Internet Explorer 8.0-10.0 ---- dl的margin为: margin:16px 0 16px 0; 
Opera 12.11 --------------------- dl的margin为: margin:16px 0 16px 0; 
Safari 5.1 ------------------------- dl的margin为: margin:16px 0 16px 0; 
Google Chrome 27.0 --------- dl的margin为: margin:16px 0 16px 0;

// dd的margin值 
firefox 20.0 ----------------------- dd的margin为: margin:0 0 0 40px; 
Internet Explorer 6.0 ----------- dd的margin为: margin:0 0 0 40px; 
Internet Explorer 7.0 ----------- dd的margin为: margin:0 0 0 40px; 
Internet Explorer 8.0-10.0 ---- dd的margin为: margin:0 0 0 40px; 
Opera 12.11 --------------------- dd的margin为: margin:0 0 0 40px; 
Safari 5.1 ------------------------- dd的margin为: margin:0 0 0 40px; 
Google Chrome 27.0 --------- dd的margin为: margin:0 0 0 40px;

// ul的margin值 
firefox 20.0 ----------------------- ul的margin为: margin:16px 0 16px 0; 
Internet Explorer 6.0 ----------- ul的margin为: margin:19px 0 19px 40px; 
Internet Explorer 7.0 ----------- ul的margin为: margin:19px 0 19px 40px; 
Internet Explorer 8.0-10.0 ---- ul的margin为: margin:16px 0 16px 0; 
Opera 12.11 --------------------- ul的margin为: margin:16px 0 16px 0; 
Safari 5.1 ------------------------- ul的margin为: margin:16px 0 16px 0; 
Google Chrome 27.0 --------- ul的margin为: margin:16px 0 16px 0;

// ol的margin值 
firefox 20.0 ----------------------- ol的margin为: margin:16px 0 16px 0; 
Internet Explorer 6.0 ----------- ol的margin为: margin:19px 0 19px 40px; 
Internet Explorer 7.0 ----------- ol的margin为: margin:19px 0 19px 40px; 
Internet Explorer 8.0-10.0 ---- ol的margin为: margin:16px 0 16px 0; 
Opera 12.11 --------------------- ol的margin为: margin:16px 0 16px 0; 
Safari 5.1 ------------------------- ol的margin为: margin:16px 0 16px 0; 
Google Chrome 27.0 --------- ol的margin为: margin:16px 0 16px 0;

// ul的padding值 
firefox 20.0 ----------------------- ul的padding为: padding:0 0 0 40px; 
Internet Explorer 6.0 ----------- ul的padding为: padding:0 0 0 0; 
Internet Explorer 7.0 ----------- ul的padding为: padding:0 0 0 0; 
Internet Explorer 8.0-10.0 ---- ul的padding为: padding:0 0 0 40px; 
Opera 12.11 --------------------- ul的padding为: padding:0 0 0 40px; 
Safari 5.1 ------------------------- ul的padding为: padding:0 0 0 40px; 
Google Chrome 27.0 --------- ul的padding为: padding:0 0 0 40px;

// ol的padding值 
firefox 20.0 ----------------------- ol的padding为: padding:0 0 0 40px; 
Internet Explorer 6.0 ----------- ol的padding为: padding:0 0 0 0; 
Internet Explorer 7.0 ----------- ol的padding为: padding:0 0 0 0; 
Internet Explorer 8.0-10.0 ---- ol的padding为: padding:0 0 0 40px; 
Opera 12.11 --------------------- ol的padding为: padding:0 0 0 40px; 
Safari 5.1 ------------------------- ol的padding为: padding:0 0 0 40px; 
Google Chrome 27.0 --------- ol的padding为: padding:0 0 0 40px;

// p的margin值 
firefox 20.0 ----------------------- p的margin为: margin:16px 0 16px 0; 
Internet Explorer 6.0 ----------- p的margin为: margin:19px 0 19px 0; 
Internet Explorer 7.0 ----------- p的margin为: margin:19px 0 19px 0; 
Internet Explorer 8.0-10.0 ---- p的margin为: margin:16px 0 16px 0; 
Opera 12.11 --------------------- p的margin为: margin:16px 0 16px 0; 
Safari 5.1 ------------------------- p的margin为: margin:16px 0 16px 0; 
Google Chrome 27.0 --------- p的margin为: margin:16px 0 16px 0;

// thead,tbody,tfoot的margin值 
firefox 20.0 ----------------------- thead,tbody,tfoot的margin为: margin:2px 2px 2px 2px; 
Internet Explorer 6.0 ----------- thead,tbody,tfoot的margin为: margin:2px 2px 2px 2px; 
Internet Explorer 7.0 ----------- thead,tbody,tfoot的margin为: margin:2px 2px 2px 2px; 
Internet Explorer 8.0-10.0 ---- thead,tbody,tfoot的margin为: margin:2px 2px 2px 2px; 
Opera 12.11 --------------------- thead,tbody,tfoot的margin为: margin:2px 2px 2px 2px; 
Safari 5.1 ------------------------- thead,tbody,tfoot的margin为: margin:2px 2px 2px 2px; 
Google Chrome 27.0 --------- thead,tbody,tfoot的margin为: margin:2px 2px 2px 2px;

// form的margin值 
firefox 20.0 ----------------------- form的margin为: margin:0 0 0 0; 
Internet Explorer 6.0 ----------- form的margin为: margin:19px 0 19px 0; 
Internet Explorer 7.0 ----------- form的margin为: margin:19px 0 19px 0; 
Internet Explorer 8.0-10.0 ---- form的margin为: margin:0 0 0 0; 
Opera 12.11 --------------------- form的margin为: margin:0 0 0 0; 
Safari 5.1 ------------------------- form的margin为: margin:0 0 0 0; 
Google Chrome 27.0 --------- form的margin为: margin:0 0 0 0;

时间: 2024-08-03 21:36:49

常用元素默认margin和padding值问题探讨的相关文章

css部分样式整理-特殊字体格式、导航栏固定、块级元素与行内元素、html 元素的margin与padding默认值、css样式优先级概括等

1.一些特殊字体样式: 首行缩进2字符:{text-indent:2em;} 水平居中:{text-align:center;} 两端对齐:{text-align:justify;} 垂直居中:{vertical-align: middle;} 字间距2字符:{letter-spacing:2em;} 行间距2倍:{line-height:2;}     2.导航栏固定在页面某处(相对于<body>):     {position:fixed;left:  px;top:  px;}  3.块

浅谈Margin和Padding值设置成百分数的布局

转自:问说网http://www.uedsc.com/discussion-margin-and-padding-values.html Margin和Padding是我们在网页设计经常使用到的CSS样式,他们分别是间距和填充,一个作用于盒子外面,一个作用于盒子里面,默认的情况下,这些属性的值都会被计算在盒子的面积里面,在网页开发中的流体布局或者是响应式布局中,经常将Margin和Padding设置成百分数,那么到底这个百分数是多少,他是如何计算的呢? Margin 假设我们有这样的一段HTML

块级元素及内联元素对margin、padding的态度

1.块级元素 margin:跟标准一样,设置该块级元素边框与同级兄弟元素或者父元素的距离,俗称外边距. padding:先延伸边框(也就是优先改变元素尺寸而不动元素中内容的位置),当边框碰到父元素或兄弟元素的边界时,才向相反方向延伸,这时会改变该元素中内容的位置 padding演示: 原样 html: <div>块级元素</div> css: div{ width:100px; border:1px solid #000; } 添加padding后: div{ width:100p

css&#160;reset 以及哪些元素有默认margin&#160;padding值

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

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

一.h1~h6标签:有默认margin(top,bottom且相同)值,没有默认padding值. 在chrome中:16,15,14,16,17,19; 在firefox中:16,15,14,16,17,20; 在safari中:16,15,14,16,17,19; 在opera中:16,15,14,14,17,21; 在maxthon中:16,14,14,15,16,18; 在IE6.0中:都是19: 在IE7.0中:都是19: 在IE8.0中:16,15,14,16,17,19; 二.dl

网页CSS中*{margin:0; padding:0;}有什么用

* 这东西叫"通配符"用来匹配页面上所有元素.*{margin:0; padding:0;} 像 2L 所说,body ,ul, li ,p,h1~h6,dd,dt 等--都有默认的margin 或padding值的,加上这句就可以删除浏览器这些默认值,方面后面的设置.(注:不是没它不行,只是方便而已) 你加上面那句后页面乱,那是当然的,因为你没加时是基于有默认的margin或padding 进行设置的,去掉了默认值,就当然会乱了.咋办?一,就是不加*{margin:0; paddin

为什么css一开始需要设定margin和padding为 0px?

我们在写HTML的时候,通常会在样式里先写上一些像body.a.ul li等这些标签的全局的一些样式.之所以有这样的习惯,主要是是因为以下几点: 首先:浏览器兼容.我们做的网页是给用户看的,我们只负责把网页做出来,至于用户怎么使用,在哪种浏览器上使用就不是我们的事情了.但是不同的浏览器他们的margin又不尽相同,所以为了满足这种需求,我们一般都是为body设置他们的margin和padding为0px.当然啦还有其他的解决方式这里不过多讨论. 还有一点,个人觉得挺重要的一点,就是能够减少一些代

HTML元素margin、padding的默认值

HTML元素margin.padding的默认值 element margin(单位像素) padding html 0 0 body 8 0 div 0 0 h1 21 0 h2 19 0 19 0 0 h3 18 0 18 0 0 p 16 0 16 0 0 ul 16 0 16 0 0 0 0 40 li 0 0 td 0 1 dl 16 0 16 0 0 dt 0 0 dd 0 0 0 40 0 body,h1,h2,h3,h4,h5,h6,p,ul,dl,dd{margin:0;pad

一些浏览器的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, 有默认内边距p