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 安全设计之道>,书中的内容多是从微软官方文档翻译而来,这本书 ...
随机推荐
- Rafy 框架 - 大批量导入实体
某些场景下,开发者希望能够大批量地把实体的数据导入到数据库中.虽然使用实体仓库保存实体列表非常方便,但是其内部实现机制是一条一条的保存到数据库,当实体的个数较多时,效率就会很低.所以 Rafy 设计了 ...
- APNS 远程推送通知 PUSH deviceToken
服务器向客户端推送消息: 当应用程序推到后台,或者根本就没有运行(我们的代码无能为力) 如果这种情况之下,应用程序想和用户交互(传统的做法 不可能) 推送 APNS:Ap ...
- UEditor百度富文本编辑器--preview在线预览时头部被挡住的解决方案
问题截图: 正常情况应该是如下显示: 解决方案: 1.打开ueditor/dialogs/preview/preview.html 2.找到body节点下面这一句 document.getElemen ...
- Both must set "document.domain" to the same value to allow access.
有两个域名指向我的网站,其中一个域名访问我的网站的话就可以看到日期控件 另一个域名访问我的网站不能看到日期控件, 在EF中使用日期控件,浏览器审查元素后看到,报这个错误“Both must set & ...
- Entity Framework 教程——创建实体数据模型
创建实体数据模型: 本文将带你创建实体数据模型(EDM)SchoolDB数据库和理解基础建设模块. 实体数据模型(EDM)是用于描述实体之间关系的一种模型,以下将使用Visual Studio 201 ...
- Aspose.Cells导出Excel（2）
DataTable dtTitle = ds.Tables[]; DataTable dtDetail = ds.Tables[]; int columns = dtTitle.Columns.Cou ...
- SQL联合查询：子表任一记录与主表联合查询
今天有网友群里提了这样一个关于SQL联合查询的需求: 一.有热心网友的方案: 二.我的方案: select * from ( select a.*,(select top 1 Id from B as ...
- sea.js详解
Seajs相关知识 seajs.Use 引入入口文件 第一个参数表示模块id 字符串表示一个模块id 数组,数组每个成员表示一个模块 第二个参数表示回调函数(可有可无的) 作用就是当模块加载完成执行回 ...
- Android多媒体框架图
Android多媒体整体架构图 MediaPlayer框架图 Camera框架图 SoundRecorder框架图 VideoCamera框架图 OpenCore与Skia ALSA Audio框架图 ...
- Scala变量（三）
变量是一种使用方便的占位符,用于引用计算机内存地址,变量创建后会占用一定的内存空间. 基于变量的数据类型,操作系统会进行内存分配并且决定什么将被储存在保留内存中.因此,通过给变量分配不同的数据类型,你 ...