盒子的margin用法大家都应该很清楚，在实际中一般使用margin来水平居中或者让自己移动相应的位置，但是margin给负数在实际中也是有用的。
如图为两个浮动的盒子。
给左边的盒子margin-left: -50px;后如图所示
如图，蓝色盒子移动了，但是粉色盒子自身只是被压住了，并没有移动。
代码如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>margin负数Demo</title> <style> *{ padding: 0; margin: 0; /*清楚浏览器的默认效果以便看得清楚*/ } .p1{ width: 100px; height: 100px; background-color: pink; float: left; /* margin-left: -5px;*/ margin-left: -50px; } .p2{ width: 200px; height: 200px; background-color: blue; float: left; } </style> </head> <body> <div class="p1"></div> <div class="p2"></div> </body> </html>