1. 前言
margin 在 css 布局中用于外边距的调整，那如果设置成负值后，四个方向上又有什么不同的情况发生？结论在文末，你也可以直接移动到文末查看，但希望你能跟着我一起走完探讨的过程，相信你会有所收获！
2. 示例
演示前，我们先建立一个方框内嵌一个小方块，代码如下（后续演示会把如下基础代码用省略号代替，只展示关键语句）
以下示例针对 橙色小方块 来进行探讨
1）margin-left 取负值
可以看到，橙色方块 自身向左 偏移
#left{
...
margin-left: -20px;
}
2）margin-top 取负值
可以看到，橙色方块 自身向上 偏移
#left{
...
margin-top: -20px;
}
3）margin-right 取负值
由于 margin-right 和 margin-bottom 的特性和上述两者不一样，因此在橙色方块旁引入 灰色方块 进行探索
可以看到，设置 margin-right 负值后，橙色方块 自身不动，但其右边的灰色方块 向左偏移
#container{
...
// 让灰色方块位于橙色方块右边
display: flex;
}
#left{
margin-right: -20px;
}
4）margin-bottom 取负值
可以看到，橙色方块 自身不动，但其下边的灰色方块 向上偏移
#left{
...
margin-bottom: -20px;
}
3. 总结
设置负值的现象margin-left自身向左移动margin-top自身向上移动margin-right自身不动，其右边元素向左移动margin-bottom自身不动，其下方元素向上移动也就是说，margin 设置为负值，不管是自身还是相邻元素，都只有两个方向可以移动：向左、向上