二、margin 和padding浏览器解析差异

只有默认margin的元素

<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

只有默认padding的元素

<legend> 定义<fieldset>元素的标题 padding：0 2px 0 2px

<p> 段落 padding：18px 0 18px 0

默认同时拥有margin或padding或border二个以上的元素

<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

原文链接：http://www.cnblogs.com/leona-d/p/5950280.html

版权声明：本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文链接
 
 

web兼容学习分析笔记-margin 和padding浏览器解析差异的更多相关文章

  1. web兼容学习分析笔记--块级、内联、内联块级元素

    一.块级.内联.内联块级元素 (1)块级元素:block **独占一行 **可设置width,height,margin,padding **内部可包含块级或内联元素 (3)内联(行内)元素:inli ...

  2. 每天成长一点---WEB前端学习入门笔记

    WEB前端学习入门笔记 从今天开始,本人就要学习WEB前端了. 经过老师的建议,说到他每天都会记录下来新的知识点,每天都是在围绕着这些问题来度过,很有必要每天抽出半个小时来写一个知识总结,及时对一天工 ...

  3. Web 页面性能分析笔记

    网页慢的原因不一定只是前端,所以需要结合Network一起看 如何评价一个页面打开得快不快,可以用两个指标描述,一个是ready的时间,另一个是load的时间. 如下示例表示,read时间是2.72s ...

  4. 深度学习课程笔记（一）CNN 卷积神经网络

    深度学习课程笔记(一)CNN 解析篇 相关资料来自:http://speech.ee.ntu.edu.tw/~tlkagk/courses_ML17_2.html 首先提到 Why CNN for I ...

  5. web前端学习笔记

    web前端学习笔记(CSS盒子的定位) 相对定位 使用相对定位的盒子的位置常以标准流的排版方式为基础,然后使盒子相对于它在原本的标准位置偏移指定的距离.相对定位的盒子仍在标准流中,它后面的盒子仍以标准 ...

  6. web前端学习（三）css学习笔记部分（5）-- CSS动画--页面特效、HTML与CSS3简单页面效果实例

    CSS动画--页面特效部分内容目前仅仅观看了解内容,记录简单笔记,之后工作了进行内容的补充 7.  CSS动画--页面特效 7.1  2D.3D转换 7.1.1  通过CSS3转换,我们能够对元素进行 ...

  7. Web前端学习笔记(001)

    ....编号    ........类别    ............条目  ................明细....................时间 一.Web前端学习笔记         ...

  8. web前端学习部落22群 明白何谓Margin Collapse

    明白何谓Margin Collapse 不同于其他很多属性,盒模型中垂直方向上的Margin会在相遇时发生崩塌,也就是说当某个元素的底部Margin与另一个元素的顶部Margin相邻时,只有二者中的较 ...

  9. 安全：Web 安全学习笔记

    背景 说来惭愧,6 年的 web 编程生涯,一直没有真正系统的学习 web 安全知识(认证和授权除外),这个月看了一本<Web 安全设计之道>,书中的内容多是从微软官方文档翻译而来,这本书 ...

随机推荐

  1. Windows Phone 8.1又有什么新花样

    今年微软新任CEO提出了“Mobile First and Cloud First”的发展战略,随着微软Mobile First战略的实行,开发者是时候重视Windows Phone了.你可能不相信, ...

  2. Moon.Orm 配置说明

    一.在线技术文档: http://files.cnblogs.com/files/humble/d.pdf   二.使用的大致流程   1.首先下载代码生成器,可以一键生成项目Model层;(其中含有 ...

  3. 04实现累加和计算功能并且实现textbox不允许输入数字以外的字符但不包括退格键同时不允许第一个数值为0

    private void button1_Click(object sender, EventArgs e) { double number1, number2; if (double.TryPars ...

  4. Devexress XPO xpPageSelector 使用

    在官网找到的.在这里做个备注. private void simpleButton1_Click(object sender, EventArgs e) { ) return; xpPageSelec ...

  5. Delphi_04_Delphi_Object_Pascal_基本语法_02

    这里简单的描述Object的语法中的基本内容,数据类型.因为代码是自描述的所以不废话,直接贴代码. { 用户自定义类型 1.数组 2.动态数组 3.记录 4.集合 } program UserDefi ...

  6. Json map

    1. 返回数据形式 Class returnMsg{ boolean success; String   msg; String   errorMsg; } 2.问题 当msg中的数据由对象 或 集合 ...

  7. C标准头文件<errno.h>

    声明了错误处理相关的宏 errno errno即error number,在程序启动时被设为0,当某个库函数运行出现错误的时候,会将相应的能表达错误类型的数字赋值给这个左值,这些数字往往有相应的宏来表 ...

  8. java Io文件输入输出流 复制文件

    package com.hp.io; import java.io.FileInputStream; import java.io.FileNotFoundException; import java ...

  9. 来玩Play框架04 表单

    作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! 表单(form)是最常见的从客户往服务器传递数据的方式.Play框架提供了一些工具 ...

  10. BW知识问答汇总

    什么是sap的星型结构,能不能详细讲解一下? Cube的星型结构中SID技术的优点有哪些? 什么是BW的星型结构,与传统的星型结构的区别是什么? SAP的星型结构相对于传统的星型结构优势? Cube与 ...