margin
外边距，表示边框到最近盒子的距离。
对于左右两边
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>流浪者</title> <style> *{ padding: 0px; margin: 0px; } .box1{ width: 200px; height: 200px; background-color: red; display: inline-block; margin-right: 20px; } .box2{ width: 200px; height: 200px; background-color: green; display: inline-block; margin-left: 20px; } </style> </head> <body> <span class="box1"></span> <span class="box2"></span> </body> </html>
对于上下盒子
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>流浪者</title> <style> *{ padding: 0px; margin: 0px; } .box1{ width: 200px; height: 200px; background-color: red; display: block; margin-bottom: 20px; } .box2{ width: 200px; height: 200px; background-color: green; display: block; margin-top: 60px; } </style> </head> <body> <span class="box1"></span> <span class="box2"></span> </body> </html>
这种现象叫做margin塌陷问题，当给两个标准文档流下的盒子设置垂直方向上的margin时，以较大的为准。
当我们给两个标准流下的兄弟盒子设置浮动之后，它们脱离了标准文档流，就不会出现margin塌陷的问题。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>流浪者</title> <style> *{ padding: 0; margin: 0; } .father{ width: 400px; overflow: hidden; border: 1px solid gray; } .box1{ width: 300px; height: 200px; background-color: red; margin-bottom: 20px; float: left; } .box2{ width: 400px; height: 300px; background-color: green; margin-top: 50px; float: left; } </style> </head> <body> <div class="father"> <div class="box1"></div> <div class="box2"></div> </div> </body> </html>
margin：0 auto；
设置标准文档流下的盒子居中。
如果给盒子设置了浮动，则margin：0 auto失效。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>流浪者</title> <style> *{ padding: 0; margin: 0; } .box1{ width: 200px; height: 200px; background-color: red; margin: 0 auto; } .box2{ width: 400px; height: 300px; background-color: green; } </style> </head> <body> <div class="box1"></div> <div class="box2"></div> </body> </html>
使用margin：0 auto;注意点：
1.使用margin: 0 auto;水平居中盒子必须有width，要有明确width，文字水平居中使用text-align: center;
2.只有标准流下的盒子 才能使用margin:0 auto;
当一个盒子浮动了，固定定位，绝对定位(后面会讲)，margin:0 auto; 不能用了
3.margin：0 auto;居中盒子。而不是居中文本，文字水平居中使用text-align: center;
作者：流浪者
日期：2019-08-31
