web兼容学习分析笔记-margin 和padding浏览器解析差异
二、margin 和padding浏览器解析差异
<body>margin：8px margin：15px 10px 15px 10px(IE7)
<blockquote> 定义长的引用 margin:18px 40px 18px 40px margin：30px auto 30px auto(IE7)
<dl> 定义列表详情 margin:18px 0 18px 0 margin：auto(IE7)
<h1> margin：12.0667px 0 12.0667px 0 (firefox) 12.060px 0 12.060px 0（Google/Edge）
<h2> margin：14.9333px 0 14.9333px 0 (firefox) 14.940px 0 14.940px 0（Google/Edge）
<h3> margin：18px 0 18px 0 (firefox)
<h4> margin：23.9333px 0 23.9333px 0 (firefox) 23.940px 0 23.940px 0（Google/Edge）
<h5> margin：30.0667px 0 30.0667px 0 (firefox) 30.060px 0 30.060px 0（Google/Edge）
<h6> margin：41.9333px 0 41.9333px 0 (firefox) 41.940px 0 41.940px 0（Google/Edge）
<pre> 定义预格式文本 margin：18px 0 18px 0
<legend> 定义<fieldset>元素的标题 padding：0 2px 0 2px
<p> 段落 padding：18px 0 18px 0
<fieldset> 定义围绕表单元素的边框
margin：0 2px 0 2px; margin：auto(IE7)
border：2px;
padding：6.3px 11.25px 13.5px 11.25px(firefox/Google) 6.3px 13.5px 11.16px 13.5px(Edge)
<hr> 水平线
margin：9px 0 9px 0；
border：1px；
其他：默认垂直居中，自动根据所处的位置定义其margin，使其处于垂直居中状态
<ul> 无序列表 ，<ol> 有序列表
margin：18px 0 18px 0 margin：auto auto auto 30px(IE7)
padding：0 0 0 40px
总结分析：
1、火狐、谷歌、Edge、IE9以上几乎没有太大差别
2、IE8以下立马就发现，那差别不是一般的大，是很大。
3、因此通常前端在写页面之前会有一个通用性的开头：*{margin:0,padding:0}
作者：leona
web兼容学习分析笔记-margin 和padding浏览器解析差异的更多相关文章
- web兼容学习分析笔记--块级、内联、内联块级元素
一.块级.内联.内联块级元素 (1)块级元素:block **独占一行 **可设置width,height,margin,padding **内部可包含块级或内联元素 (3)内联(行内)元素:inli ...
- 每天成长一点---WEB前端学习入门笔记
WEB前端学习入门笔记 从今天开始,本人就要学习WEB前端了. 经过老师的建议,说到他每天都会记录下来新的知识点,每天都是在围绕着这些问题来度过,很有必要每天抽出半个小时来写一个知识总结,及时对一天工 ...
- Web 页面性能分析笔记
网页慢的原因不一定只是前端,所以需要结合Network一起看 如何评价一个页面打开得快不快,可以用两个指标描述,一个是ready的时间,另一个是load的时间. 如下示例表示,read时间是2.72s ...
- 深度学习课程笔记（一）CNN 卷积神经网络
深度学习课程笔记(一)CNN 解析篇 相关资料来自:http://speech.ee.ntu.edu.tw/~tlkagk/courses_ML17_2.html 首先提到 Why CNN for I ...
- web前端学习笔记
web前端学习笔记(CSS盒子的定位) 相对定位 使用相对定位的盒子的位置常以标准流的排版方式为基础,然后使盒子相对于它在原本的标准位置偏移指定的距离.相对定位的盒子仍在标准流中,它后面的盒子仍以标准 ...
- web前端学习（三）css学习笔记部分（5）-- CSS动画--页面特效、HTML与CSS3简单页面效果实例
CSS动画--页面特效部分内容目前仅仅观看了解内容,记录简单笔记,之后工作了进行内容的补充 7. CSS动画--页面特效 7.1 2D.3D转换 7.1.1 通过CSS3转换,我们能够对元素进行 ...
- Web前端学习笔记(001)
....编号 ........类别 ............条目 ................明细....................时间 一.Web前端学习笔记 ...
- web前端学习部落22群 明白何谓Margin Collapse
明白何谓Margin Collapse 不同于其他很多属性,盒模型中垂直方向上的Margin会在相遇时发生崩塌,也就是说当某个元素的底部Margin与另一个元素的顶部Margin相邻时,只有二者中的较 ...
- 安全：Web 安全学习笔记
背景 说来惭愧,6 年的 web 编程生涯,一直没有真正系统的学习 web 安全知识(认证和授权除外),这个月看了一本<Web 安全设计之道>,书中的内容多是从微软官方文档翻译而来,这本书 ...
随机推荐
- jQuery-1.9.1源码分析系列（三） Sizzle选择器引擎——编译原理
这一节要分析的东东比较复杂,篇幅会比较大,也不知道我描述后能不能让人看明白.这部分的源码我第一次看的时候也比较吃力,现在重头看一遍,再分析一遍,看能否查缺补漏. 看这一部分的源码需要有一个完整的概念后 ...
- 让BASH,VIM美美的Powerline
前言 鉴于BASH及其周边强大的工具以及VIM高效快捷,加上现在我工作重心转移到前端开发上,因此我华丽地转向Linux阵营(当然从最傻瓜式的Ubuntu开始啦!).但BASH和VIM默认样式确实颜值 ...
- C#开发微信门户及应用(21)-微信企业号的消息和事件的接收处理及解密
在上篇随笔<C#开发微信门户及应用(19)-微信企业号的消息发送(文本.图片.文件.语音.视频.图文消息等)>介绍了有关企业号的消息发送,官方特别声明消息是不用加密发送的.但是在回调的服务 ...
- 桌面秀：以ubuntu主为的开发桌面环境
桌面系统是xubuntu,字体经过美化的(也就是复制了windows7下的微软字体) 可以看到字体效果与vmware下的win7差距已经很小了,略差一点,在可以接受的范围内了. 上图右边的firefo ...
- CentOS 7 下安装redis步骤
1. 从redis官网下载redis源码,本例安装在/usr/opt下 [root@localhost opt]# pwd /usr/opt [root@localhost opt]# wget ht ...
- 使用Eclipse创建Maven Web工程
方法/步骤 1 使用Eclipse创建Maven Web工程 2 找到Maven Project,点击Next 3 勾选上Create a simple project (不使用骨架),Next 4 ...
- Aix/Linux下自动备份oracle数据库
曾经有个同事,来回操作开发和生产的数据库,结果误删了生产的数据库,那种心情我想不是一般人能理解的,虽然说oracle可以有方法还原,但并不是彻底的. 所以,在工作中,不管是开发还是维护,备份数据库是非 ...
- 在网站开发中很有用的8个 jQuery 效果【附源码】
jQuery 作为最优秀 JavaScript 库之一,改变了很多人编写 JavaScript 的方式.它简化了 HTML 文档遍历,事件处理,动画和 Ajax 交互,而且有成千上万的成熟 jQuer ...
- 如何用代码读取Office Online Server2016的文档的备注信息
前言 在一个项目上客户要求读取office online server 2016的对文档的备注信息,如下图: 以前思路老纠结在OOS这个在线上,总有以为这个信息存储在某个列表中,其实错了,这个备注信息 ...
- AEAI HR_v1.5.2升级说明，开源人力资源管理系统
1.升级说明 本次AEAI HR升级内容主要是针对数通畅联推出AEAI ECP企业云联平台而升级的,其中对AEAI HR的各模块进行扩展,同时增加了移动门户版功能及为AEAI ECP提供数据服务接口. ...