margin：外边距

定义：围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”区域。

• 接受任何长度单位（像素、英寸、毫米或 em）、百分数值甚至负值，默认值为0
• 往往也是内盒子边框与外盒子的边框的距离（特殊地方就是浮动、合并）
• 其写法也是有1、2、3、4值，其用法和padding一样
• 百分数是相对于父元素的 width 计算的
• 浏览器会为某些元素设置默认的外边距，eg：p元素的上下空一行
• margin-top、margin-right、margin-bottom、margin-left分别设置4个方向的外边距
• 值为auto，浏览器自己设置
• 特别注意父元素没有边框值（>0）,其子元素外边距失效的情况
• 特别注意兄弟元素margin合并问题

当元素是兄弟元素时，在不设置float和position:absolute时，margin-bottom和margin-top会合并为两者中的最大值（想想在同一层要放下2个元素）。

例子：

使用“border: 1px solid red”的效果

 

没有“border: 1px solid red”使用的效果：

 

注意：div1在div中的margin-top值为0px。而Chrome盒子模型显示还是50px

margin合并总结

相邻的兄弟姐妹元素

毗邻的两个兄弟元素之间的外边距会塌陷（除非后者兄弟姐妹清除浮动）

这句话有两个要点：

1. 一般情况：毗邻的两个兄弟元素之间的外边距会塌陷。
2. 特殊情况：前面元素浮动，当后面div清除浮动时，毗邻的两个兄弟元素之间的外边距不会塌陷（不在一个层）。

一般情况:

相邻兄弟的合并：上面元素的下外边距与下面的元素的上外边距会发生合并，两个值都会变成他们之间的最大值。如下验证过程

  

  

上面的例子中，我们给灰色的div设置了30px的下外边距，这时的显示都是符合预期的。现在我们给粉色的div添加一个margin-top:20px：   .bro2{       margin-top:20px;     }

按照我们的预期，应该是灰色div的margin-bottom与粉色div的margin-top叠加，最终使得两个div的间隔为50px。但是我们看到的效果并没有改变。

现在我们改变粉色div的margin-top为60px：.bro2{         margin-top:60px;     }

按照我们的预期，应该是灰色div的margin-bottom与粉色div的margin-top叠加，最终使得两个div的间隔为90px。但是我们看到，两个div的间隔为粉色div设置的margin-top。

这种现象就是外边距合并的典型情况。相邻的两个兄弟元素之间的外边距会合并即取两者之前的最大值。灰色div的下边距为30px，当粉色div的上边距为20px时，取两者中的较大值30px，所以两个div的间隔为30px；当粉色div的上边距为60px时，取两者中的较大值60px，所以两个div的间隔为60px。

特殊情况

 

 

如上图修改.bro2的上外边据并展示其上外边距的区域，你会发现其上外边距并不是与其兄弟、父元素之间的距离，并且其值没有大于230px时，效果图是没有变化的（元素在浏览器的位置没有变化）。

因为.bro1设置浮动，脱离了标准流，.bro2属于标准流

块级父元素与其第一个/最后一个子元素

1. 上边距合并：如果块级父元素与第一个子元素之间不存在上边框、上内补、inline content、清除浮动这四条属性之一（对于上边框和上内补，也可以说，当上边距及上内补宽度为0时），那么这个块级元素和其第一个子元素的上边距就可以说“挨到了一起”。此时这个块级父元素和其第一个子元素就会发生上外边距合并的现象，换句话说，此时这个父元素对外展现出来的外边距将直接变成这个父元素和其第一个子元素的margin-top的较大者，而父元素与该子元素之间边距消失。
2. 下边距合并：类似的，若块级元素的margin-bottom与它的最后一个子元素的margin-bottom之间没有border、padding、inline content、height、min-height、max-height分隔时，就会发生下边距合并的现象。

例子：

结果：

 

现在我们想让粉色div和父div之前有40px的空隙，所以给粉色div设置"margin-top:40px"：

.child1{ margin-top:40px; },效果如下：

 

上图是parent的效果（父元素最上面也空出一块区域）

 

上图是child1的效果：红色框选区域是其外边距区域

这就是父子元素之间的margin合并。由于粉色div与父div之间没有上边框、上内补、inline content、清除浮动这四条属性之一，使得两个div之间产生了margin合并的现象。

同样地，父元素与最后一个子元素之间也可能发生margin合并的情况，情况大致相同，不再举例说明。

空的块级元素，如果其border、padding、inline content、height、min-height都不存在，那么它的上下外边距将会合并

测试：没有加高时，通过改变margin-top的值（0-30px）灰色和红色的间隔不会发生变化，说明此时合并后的值是空块元素上下外边的最大值

给.psecial加宽度之后，.special就不是空元素，所以它不会发生margin合并的现象（上外边与下外边距都变成上外边距了），所以灰色和粉色div的间隔为20px+10px+30px=60px。

总结

• 发生外边距合并的元素：块元素之间（父子、兄弟、空块）；发生外边距合并的边距：上、下边距（左右边距不会合并）；
• 相邻的兄弟元素之间必出现margin合并（除非后者兄弟姐妹清除浮动）
• 父元素与第一个子元素间，如果没有padding、border、inline content、清除浮动这四个属性之一，就会出现上边距合并；
• 父元素与最后一个子元素之间，如果没有padding、border、inline content、height、min-height、max-height这几个属性之一，就会出现下边距合并；
• 空的块级元素，如果其border、padding、inline content、height、min-height都不存在，那么它的上下外边距将会合并

  margin设置元素外边距的宽度，它有这么几个特点

   

  1. 块级元素的垂直相邻外边距会合并

  2. 行内元素实际上不占上下外边距。行内元素的的左右外边距不合并

  3. 浮动元素的外边距也不会合并

  4. 允许指定负的外边距值，不过使用时要小心