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

所属分类: 网页制作 / 应用技巧 阅读数: 1023
收藏 0 赞 0 分享

关于默认元素在不同浏览器中的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;
更多精彩内容其他人还在看

关于favicon.ico的两三事(最好就是放根目录)

最近网站开始改版,如果文档中没有声明favicon.ico,在chrome浏览器中会自动加载根目录的favicon.ico,正好将具体的分析也分享一下, 方便需要的朋友
收藏 0 赞 0 分享

分享10个最新的Web前端框架(翻译)

前端Web框架的本质就是JavaScript,CSS和HTML相关组件的集合,你可以把它应用到日常的项目中,可以极大节省开发时间,特别是在那些紧急的项目中。这里,我们为大家列出了10个前端Web框架,可以参考
收藏 0 赞 0 分享

分享15个最佳的HTML/CSS设计和开发框架

高效的框架不仅是网站设计的基础,它提供的各种丰富多彩的功能,还提高整体的功能和性能。一个网站的外观和设计完全可以通过一些完美和可靠的工具而彻底改头换面。现在,越来越多的网页设计师和编辑人员选择使用CSS框架来创建网站
收藏 0 赞 0 分享

关于启用 HTTPS 的一些经验分享

这篇文章主要介绍了关于启用 HTTPS 的一些经验分享,需要的朋友可以参考下
收藏 0 赞 0 分享

人人必知10个网站易用性技巧

这篇文章主要介绍了人人必知10个网站易用性技巧 的相关资料,需要的朋友可以参考下
收藏 0 赞 0 分享

CSS3实用方法总结(推荐)

下面小编就为大家带来一篇CSS3实用方法总结(推荐)。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

Web前端开发中找错的基本思路

本文给大家分享了在制作web前端页面的时候,找错、查错以及解决错误的方法,非常的详细,这里推荐给大家,希望对大家能有所帮助。
收藏 0 赞 0 分享

深入理解指定IE浏览器渲染方式

本文详细向大家讲解了IE浏览器设置只能渲染方式的方法及其含义。前端设计师们比较痛恨的浏览器就是IE了,没有之一!!今天主要来探讨设置兼容性即指定IE浏览器渲染方式。
收藏 0 赞 0 分享

让网页自动调用双核浏览器的极速模式(Webkit)

国内的主流浏览器都是双核浏览器:基于Webkit内核用于常用网站的高速浏览。基于IE的内核用于兼容网银、旧版网站
收藏 0 赞 0 分享

如何设计制作自适应网页

本文介绍了
收藏 0 赞 0 分享
查看更多