web兼容学习分析笔记-margin 和padding浏览器解析差异

二、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