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 安全设计之道>,书中的内容多是从微软官方文档翻译而来,这本书 ...
随机推荐
- [转载]iOS 10 UserNotifications 框架解析
活久见的重构 - iOS 10 UserNotifications 框架解析 TL;DR iOS 10 中以前杂乱的和通知相关的 API 都被统一了,现在开发者可以使用独立的 UserNotifica ...
- Razor基础语法一
目录: 什么是Razor? 渲染HTML Razor语法 隐式 Razor 表达式 显式 Razor 表达式 什么是Razor? Razor是基于服务端代码转换成网页的标记语法.语法主要包括Razor ...
- electron之Windows下使用 html js css 开发桌面应用程序
1.atom/electron github: https://github.com/atom/electron 中文文档: https://github.com/atom/electron/tree ...
- ICSharpCode.SharpZipLib 压缩、解压文件 附源码
http://www.icsharpcode.net/opensource/sharpziplib/ 有SharpZiplib的最新版本,本文使用的版本为0.86.0.518,支持Zip, GZip, ...
- 从Google工程师到创业CTO，他的8项理念也许可以帮到你
Lan Langworth是前Google软件工程师.O'Reily作者,现在他是Artillery的co-founder/CTO,致力于把游戏机质量的游戏带进网页浏览器.下文是他从Google离职到 ...
- alias拦截器的使用
在SSH项目中,有时需要由一个Action跳转到另一个Action.有两种方式可以实现Action之间的跳转,一种是chain,另一种是redirectAction,这两种方式之间的区别是chain是 ...
- Django简介和安装
Django 最开源地方就是可以使用强大第三方插件1,Django默认没有提供对象(Object)级别的权限控制,我们可以通过该Django Guardian 扩展来帮助Django实现对象级别的权限 ...
- 和transformjs一起摇摆
写在前面 记得以前facebook做过一款HTML5游戏.开场动画是一块软体类似豆腐的东西一起摇摆.类似的效果如下面的gif所示: facebook当时使用的是createjs下的子项目easeljs ...
- 解决mysql卸载后无法从新安装，卡在最后一步的问题
mysql服务出现问题往往是最麻烦的,往往需要重装,而重装很多人卸不干净残留文件,更加装不上.在下就遇到这个问题.重装mysql到最后一步时卡在了最后一步的第二条上 解决办法就是卸载后删注册表+删数据 ...
- iOS 开发者账号到期续费流程
1.登录developer.apple.com,查看到期时间 2.到期提醒通知,点击Renew Membership续费(一般提前一个月提醒续费) 3.个人开发者账号续费需要支付 688人民币/年(9 ...