CSS之负外边距

前言

之前学习CSS的时候，对负外边距的理解不是很透彻，最近看三栏布局的内容，负外边距很关键，所以打算多方位搜索资料，对负外边距这个技巧好好学习一番。

正文

负外边距，顾名思义，就是margin的值为负，通常设置时需要区分margin-right、margin-bottom、margin-left、margin-top。

1.margin-left、margin-top会把元素向左或向上拉，盖住其旁边的元素。

2.margin-right、margin-bottom会把相邻元素向左或向上拉，盖住设置了负外边距的元素。

在文档流中设置负外边距：

所谓的文档流，指的是元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。并最终窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素。使用负边距会使元素在文档流的位置发生偏移，使周围的元素向该元素偏移前的空间流动，流动方向只能为从下往上，从右往左。

设置负外边距之前

设置负外边距之后

对中间的div设置向上的负外边距，可以看到绿色块向上流动，覆盖了部分红色块，蓝色块也跟着绿色块向上流动。 

margin-top: -5px;