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 安全设计之道>,书中的内容多是从微软官方文档翻译而来,这本书 ...
随机推荐
- 卷积神经网络提取特征并用于SVM
模式识别课程的一次作业.其目标是对UCI的手写数字数据集进行识别,样本数量大约是1600个.图片大小为16x16.要求必须使用SVM作为二分类的分类器. 本文重点是如何使用卷积神经网络(CNN)来提取 ...
- 学习javascript数据结构(二)——链表
前言 人生总是直向前行走,从不留下什么. 原文地址:学习javascript数据结构(二)--链表 博主博客地址:Damonare的个人博客 正文 链表简介 上一篇博客-学习javascript数据结 ...
- Kafka 如何读取offset topic内容 (__consumer_offsets)
众所周知,由于Zookeeper并不适合大批量的频繁写入操作,新版Kafka已推荐将consumer的位移信息保存在Kafka内部的topic中,即__consumer_offsets topic,并 ...
- cin.ignore()函数的用法
cin.ignore(a,ch)方法是从输入流(cin)中提取字符,提取的字符被忽略(ignore),不被使用.每抛弃一个字符,它都要计数和比较字符:如果计数值达到a或者被抛弃的字符是ch,则cin. ...
- solr添加多个core
在D:\solr\solr_web\solrhome文件夹下: 1)创建core0文件夹 2)复制D:\solr\solr_web\solrhome\configsets\basic_configs/ ...
- 和transformjs一起摇摆
写在前面 记得以前facebook做过一款HTML5游戏.开场动画是一块软体类似豆腐的东西一起摇摆.类似的效果如下面的gif所示: facebook当时使用的是createjs下的子项目easeljs ...
- Atitit 在线支付系统功能设计原理与解决方案 与目录
Atitit 在线支付系统功能设计原理与解决方案 与目录 1.1. 支付系统1 1.2. 独立的支付子体系..微服务架构..1 1.3. 参考书籍1 支付战争 [The PayPal Wars:Bat ...
- 关于WCF报错之调用方未由服务器进行身份验证
在我们部署好WCF服务以后,调用WCF服务会出现”调用方未由服务器进行身份验证”的错误.这个错误是怎么造成的呢? 通常我们在创建WCF后,用本机调试,一切正常,没有任何问题.其实用本机测试的时候,服务 ...
- MP3文件ID3信息编辑器代码开源 - 开源研究系列文章
上次把磁性窗体的源码开源了,这次就开源另一个程序源码:MP3文件ID3信息编辑器.这个源码也比较简单,关键在于获取和写入MP3文件的这个ID3的信息即可. 这个操作信息编辑的就封装在MP3ID3.ba ...
- GitLab CI持续集成配置方案(补)
上篇文章介绍了GitLab CI的持续集成配置方法,本篇文章将主要介绍NUnit的持续集成和遇到的一些坑 1.NUnit单元测试持续集成 下载NUnit.3.4.1.msi,https://githu ...