html中margin可以缩小,深入理解css中的margin属性（最新浏览器支持）

本文启发于博客园一篇2016年的“深入理解css中的margin属性”文章，根据当前浏览器(

chrome 71.0.3578.98(正式版本) (64 位))，加上自己的理解，每个例子都是亲测过

这篇博文主要分为以下几个部分：

margin--基础知识

margin--在同级元素(非父子关系)之间应用

margin--在父元素和子元素之间应用(重点)

margin--margin值的单位为%时的几种情况

第一部分：margin--基础知识

要介绍margin的基础知识，我们不可回避地要谈到css盒子模型(Box Model)，一般而言，css盒子模型是用来设计和布局的。它本质上是一个盒子，包括：外边距(margin)、边框(border)、内边距(padding)以及最中间的内容(content)。下图即为盒子模型(这里只谈W3C规范的标准盒模型，而不谈IE5和IE6在怪异模式中使用的非标准的盒子模型)：

我们要介绍的margin在最外层，因为margin(外边距)一定是透明的，所以它可以用来使得不同的盒子之间留有一定的间隙从而达到布局美观等效果。从上面的盒子模型中我们可以看到，margin在四周均存在，我们可以使用margin-top、margin-right、margin-bottom、margin-left分别设置这四个方向的margin值。(注：由于这部分知识较为基础，所以我不再在这部分不做更多介绍)

第二部分：margin--在同级元素(非父子关系)之间应用

这一部分主要介绍水平方向和竖直方向的外边距的合并问题。

####(1)水平方向的外边距合并

两个水平方向的盒子相遇，那么最终两者之间的距离为左边盒子的右外边距和右边盒子的做外边距之和。

例1：代码如下：

水平方向的两个盒子

*{

margin:0;

padding:0;

border:0;

}

body{

font-size: 0;

}

.left{

width: 100px;

height: 100px;

background: red;

display: inline-block;

margin-right: 50px;

font-size: 20px;

}

.right{

width: 100px;

height: 100px;

background: yellow;

display: inline-block;

margin-left: 50px;

font-size: 20px;

}

宽为100px,右边距为50px

宽为100px,左边距为50px

效果如下：

这时两者之间的距离刚好为100px。

补充说明：大家可以看到，为了使得两个div(块状元素)脱离正常的文档流我使用了display:inline-block;属性，另外，我还把body的font-size设置为0，这样可以解决inline-block自身的问题(如果不清楚这里的描述可以看我的博文《理解与应用css中的display属性》，这篇文章介绍了inline-block存在的问题)，否则两个div的举例会大于100px。当然使用float也可以使得两个div出现在同一行中。

####(2)竖直方向的外边距合并

两个竖直方向的盒子相遇时，其竖直方向的距离等于上方盒子的下外边距和下方盒子的上外边距中较大的一个。

例2：代码如下：

`

水平方向的两个盒子

.top{

width: 100px;

height: 100px;

margin-bottom: 100px;

background: red;

}

.bottom{

width: 100px;

height: 100px;

margin-top: 50px;

background: green;

}

高为100px,下边距为100px

高为100px,上边距为50px