深刻理解CSS盒模型中的margin

• 外边距

1. 设置外边距会在元素外建立额外的“空白”，“空白”一般指不能放其余元素的区域，并且在这个区域能够看到父元素的背景，外边距不会影响盒子的大小，但会影响盒子的位置

margin会影响到盒子实际占用文档流的空间

1. 外边距与行内元素：对于行内非替换元素，上下外边距不受影响，行高也不受影响。行内替换元素则行高会有变化。负外边距是使行内替换元素挤入其它行的惟一办法
2. 负外边距
3. 四个方向的外边距解析

❤ margin-top：设置正值，自身元素会向下移动，负值反之

❤ margin-left:设置正值，自身元素会向右移动，负值反之

❤ margin-bottom:设置正值，下边的元素会向下移动，负值反之

❤ margin-right:默认状况下不会产生任何效果，右边有元素效果和margin-bottom相似

元素在页面中是按照自左向右的顺序排列的

1. 深刻理解margin重叠

★属于同一个BFC的两个相邻Box的margin会发生重叠

★垂直外边距的重叠-相邻的垂直方向外边距会发生重叠现象

1)兄弟元素（对开发有利，不须要处理）

两者都是正值时：兄弟元素的相邻垂直外边距会取二者之间的较大值

一正一负时：取两者的和

都是负值：取两者绝对值较大的

2)父子元素（必须处理）

子元素会传递给外边距
解决方案一：开启BFC

\*{ margin: 0; padding:0; }
   #up,#down{ width:200px;
   height:200px; 
   background: #FFC0CB; margin:50px; }

\*{ margin: 0; padding:0; } #wrap{ width: 300px; height: 300px; background: #FF1493; margin: 50px; } #down{ width: 150px; height: 150px; background: #FFC0CB; margin:50px; }

解决方案二：利用clearfix类

Document .box1{ width: 300px; height: 300px; background-color: #008000; }
    .box2{ width: 100px; height: 100px; background-color:deepskyblue; margin-top:200px ; } /\* 
    .box1::before{ content: ''; display: table; }
    .clearfix::before{ content:'' ; display: table; }