学过一定css的人都知道，css里面有个盒模型，margin作为盒模型的重要组成部分，我们很有必要把它搞懂！
那什么是margin呢？简单点来说，在同辈元素之间的就是元素到元素之间的距离，在父子元素之间就是子元素到父元素边框之间的距离。
margin属性可以设置 四种值：auto（浏览器计算外边距）、length（规定以具体单位计的外边距值，比如像素、厘米等。默认值是 0px）、%（规定基于父元素的宽度的百分比的外边距）、inherit（规定应该从父元素继承外边距。）其中length是用的相对最多的，我们看下值的类型为length时候，我们该怎么使用它。
length可以指定1-4个值，具体如下：
接下来说下margin在不同场合下的使用
1.在同级元素水平方向使用时
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>水平方向的两个盒子</title> <style> *{ 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; } </style> </head> <body> <!-- 两个水平方向的盒子相遇，那么最终两者之间的距离为左边盒子的右外边距和右边盒子的做外边距之和。 --> <div class="left">宽为100px,右边距为50px</div> <div class="right">宽为100px,左边距为50px</div> </body> </html>
如图所示
解释：当margin用在同级元素的时候，在水平方向两个盒子的距离等于左边盒子的右外边距和右边盒子的做外边距之和
2.在同级元素垂直方向使用时
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>margin的应用-垂直方向的两个盒子</title> <style> *{ margin:0; padding:0; border:0; } .top{ width: 200px; height: 200px; margin-bottom: 120px; background: pink; } .bottom{ width: 200px; height: 200px; margin-top: 60px; background: green; } </style> </head> <body> <!-- 两个竖直方向的盒子相遇时，其竖直方向的距离等于上方盒子的下外边距和下方盒子的上外边距中较大的一个。--> <div class="top">高为200px,下边距为120px</div> <div class="bottom">高为200px,上边距为60px</div> </body> </html>
效果如图所示：
解释：同级元素在垂直方向的margin等于两个元素之间值更大的那个
3-1.在父级元素中使用时（无padding）
我们可以设置margin-left来控制子元素的左边框和父元素的左边框之间的距离
<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <title>margin</title> <style> *{padding:0; margin:0; border:0;} .father{ width: 500px; height: 500px; background: red; } .son{ width: 100px; height: 100px; background: green; margin-left: 100px; } </style> </head> <body> <!-- 设置margin-left来控制子元素的左边框和父元素的左边框之间的距离-->
<div class="father"> <div class="son">高度为100px，margin-top为100px。</div> </div>
</body> </html>
如图所示：
解释：通过设置margin-left来控制子元素的左边框和父元素的左边框之间的距离-
3-2.在父级元素中使用时（有padding）
在有padding的情况下，子元素到父元素边框的距离等于，margin值+padding值
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>margin</title> <style> *{padding:0; margin:0; border:0;} .father{ width: 500px; height: 500px; padding:100px; background: red; } .son{ float: right; width: 100px; height: 100px; background: green; margin-right: 100px; } </style> </head> <body> <!-- 子元素的到父元素右边框的距离等于，子元素的margin-right+父元素的padding-rigth。 --> <div class="father"> <div class="son">宽度为100px，margin-right为100px。</div> </div> </body> </html>
如图所示：
解释：子元素的到父元素右边框的距离等于，子元素的margin-right+父元素的padding-rigth
3-2.在父级元素中使用（垂直方向）时
当父元素没有设置padding值或者border值时 设置子元素的margin-top会使父元素一起向下偏移
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>margin</title> <style> *{padding:0; margin:0; border:0;} .father{ width: 500px; height: 500px; background: red; } .son{ width: 100px; height: 100px; background: green; margin-top: 100px; } </style> </head> <body> <!-- 当父元素没有设置padding值或者border值时 设置子元素的margin-top会使父元素一起向下偏移-->
<div class="father"> <div class="son">高度为100px，margin-top为100px。</div> </div>
</body> </html>
在这里，我们本来希望子元素到父元素的垂直方向有100px的距离，但是结果成了到窗口100px，有什么解决办法吗？
办法很多，我这里只说两种方式，1.给父元素设置边框，如 border:1px solid #ccc 2.给父元素设置overflow:hidden
css代码如下（父元素设置overflow:hidden）：
<style> *{padding:0; margin:0; border:0;} .father{ width: 500px; height: 500px; background: red; overflow:hidden; } .son{ width: 100px; height: 100px; background: green; margin-top: 100px; } </style>
最终结果：
