CSS盒子模型之外边距(margin)

1. 外边距的设置
   外边距跟边框一样，分为上、右、下、左4个方向的边距

属性	描述
margin	简写属性，同时设置边框4个方向的外边距
margin-bottom	设置下外边距
margin-left	设置左外边距
margin-right	设置右外边距
margin-top	设置上外边距

外边距设置语法如下：

margin:margin_value [margin_value] [margin_value] [margin_value];
margin-方向：margin_value;

margin_value参数描述

参数值	描述
auto	浏览器计算外边距
length	以px、em、cm等为单位的数值作为外边距值，可取正、负
%	基于父级元素的宽度来计算外边距
inherit	继承父级元素的外边距

• 指定1个值时，表示4个方向的外边距一样
• 指定2个值时，第一个值设置上、下外边距，第二个值设置左、右外边距(在实际应用中常使用margin： 0 auto，实现水平居中)
• 指定3个值时，第一个值设置上外边距，第二个值设置左、右外边距，第三个值设置下外边距
• 指定4个值时，各个值按顺时针方向依次设置上、右、下、左外边距
  **注：**父子元素之间的边距既可以用padding定义，也可以使用margin定义，当父子边距定义为内边距时，应在父级元素中是哦应该能padding属性设置内边距；当父子边距定义为外边距时，则应在子级元素中使用margin属性设置外边距。

2.盒子外边距合并

• 相邻元素外边距合并
  两个相邻标准流块级元素，上面元素的margin-bottom边距会和下面的margin-top边距合并，如果两个外边距全为正值，合并后的边外边距等于margin-bottom边距和margin-top边距中最大的那个边距，这种现象称为margin的“塌陷”，即较小的margin塌陷到较大的margin中了。如果两个外边距存在负值，合并的外边距的高度等于这些发生合并的外边距的和。当和为负数时，相邻元素在垂直方向上发生重叠，重叠深度的呢关于外边距和的绝对值；当和为0时，两个块级元素无缝连接，示意图如下：
  

  • 包含(父子)元素外边距合并
    当外层元素和内层元素形成父子关系，也称嵌套关系时，在某些条件下，父子元素外边距会合并，条件是：当父元素没有内容或内容在子元素的后面且没有内边距或没有边框时，子元素的上外边距将和父元素的上外边距合并为一个上外边距，且为值最大的那个上外边距，同时该上外边距作为父元素的上外边距。示意图如下：要防止父、子元素的上外边距合并，只需在子元素前面设置父元素内容或保持父元素内容不变的情况下添加内边距或添加边框。
    

  • 相邻盒子之间的水平间距
    行内元素是指元素不会独占一行，相邻的行内元素会排列在同一行里，直到一行排不下才会换行。两个相邻元素之间的水平间距等于左边元素的margin-right+右边元素的margin-left，如果相加的margin-right和margin-left分别为正值，则拉开两元素之间的距离，否则拉近两者之间的距离，如果margin-right+margin-left的和为0，则两元素无缝相连；如果和为负数，则右边元素重叠在左边元素上，重叠的深度等于负数的绝对值。示意图如下：