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

秒速五厘米 2022-10-13 02:58 125阅读 0赞

# 1. 前言 #

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

# 2. 示例 #

演示前，我们先建立一个方框内嵌一个小方块，代码如下（后续演示会把如下基础代码用省略号代替，只展示关键语句）  
![在这里插入图片描述][20210706095312807.png]

<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;
    }

![在这里插入图片描述][2021070609544752.png]

**2）margin-top 取负值**

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

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

![在这里插入图片描述][20210706095504229.png]

**3）margin-right 取负值**

由于 `margin-right` 和 `margin-bottom` 的特性和上述两者不一样，因此在橙色方块旁引入 **灰色方块** 进行探索  
![在这里插入图片描述][20210706095522325.png]

<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;
    }

![在这里插入图片描述][20210706095601172.png]

**4）margin-bottom 取负值**

可以看到，橙色方块 `自身不动`，但其下边的灰色方块 `向上偏移`

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

![在这里插入图片描述][20210706095611108.png]

# 3. 总结 #

<table> 
 <thead> 
  <tr> 
   <th></th> 
   <th align="center">设置负值的现象</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>margin-left</td> 
   <td align="center">自身向左移动</td> 
  </tr> 
  <tr> 
   <td>margin-top</td> 
   <td align="center">自身向上移动</td> 
  </tr> 
  <tr> 
   <td>margin-right</td> 
   <td align="center">自身不动，其右边元素向左移动</td> 
  </tr> 
  <tr> 
   <td>margin-bottom</td> 
   <td align="center">自身不动，其下方元素向上移动</td> 
  </tr> 
 </tbody> 
</table>

也就是说，`margin` 设置为负值，不管是自身还是相邻元素，都只有两个方向可以移动：`向左`、`向上`

[20210706095312807.png]: /images/20221005/70da0a3f75a24ee09ea4c46c12dc6fd8.png
[2021070609544752.png]: /images/20221005/debec2caa69c41d280767341318bda2a.png
[20210706095504229.png]: /images/20221005/0f05ba36f2164b528b3b58b33f484ea6.png
[20210706095522325.png]: /images/20221005/eb088c4c8cb34afa8b06880861615a76.png
[20210706095601172.png]: /images/20221005/c5d0a9b0a16c4befa4a657613611e540.png
[20210706095611108.png]: /images/20221005/90b7870297a04c06a1d3d5ba1d60210e.png