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|继承父级元素的外边距|css

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

2.盒子外边距合并web

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

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

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