【CSS】margin 为负值会发生什么你想不到的事？

1. 前言

  margin 在 css 布局中用于外边距的调整，那如果设置成负值后，四个方向上又有什么不同的情况发生？结论在文末，你也可以直接移动到文末查看，但希望你能跟着我一起走完探讨的过程，相信你会有所收获！

2. 示例

  演示前，我们先建立一个方框内嵌一个小方块，代码如下（后续演示会把如下基础代码用省略号代替，只展示关键语句）

<div id="container">
	<div id="left"></div>
</div>

<style>
#container{
	width: 10rem;
	height: 10rem;
	border: 1px solid #666666;
	margin: 100px auto;
}
			
#left{
	width: 3.125rem;
	height: 3.125rem;
	background-color: #ffcc66;
	opacity: 0.8;
}
</style>

以下示例针对 橙色小方块 来进行探讨

1）margin-left 取负值

  可以看到，橙色方块 自身向左 偏移

#left{
    ...	
    margin-left: -20px;
}

2）margin-top 取负值

  可以看到，橙色方块 自身向上 偏移

#left{
    ...	
    margin-top: -20px;
}

3）margin-right 取负值

  由于 margin-right 和 margin-bottom 的特性和上述两者不一样，因此在橙色方块旁引入 灰色方块 进行探索

<div id="container">
			<div id="left"></div>
			<div id="right"></div>
		</div>

<style>
#container{
	...
}
			
#left{
	...
}
			
#right{
	width: 3.125rem;
	height: 3.125rem;
	background-color: #666666;
	opacity: 0.5;
}
</style>

  可以看到，设置 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 设置为负值，不管是自身还是相邻元素，都只有两个方向可以移动：向左、向上