理解并运用CSS的负margin值

本文样式代码采用 SCSS。

创新互联建站是创新、创意、研发型一体的综合型网站建设公司，自成立以来公司不断探索创新，始终坚持为客户提供满意周到的服务，在本地打下了良好的口碑，在过去的十年时间我们累计服务了上千家以及全国政企客户，如成都履带搅拌车等企业单位，完善的项目管理流程，严格把控项目进度与质量监控加上过硬的技术实力获得客户的一致夸奖。

浏览器兼容性为 IE6+。

你的网页中，不可能没有使用过 margin。大多数情况下，我们采用的都是正数的 margin 值，可能有时候会用到负的 margin 值。在我们的印象中，负的 margin 值就类似于浏览器的 hack 一样，不被人接受。但是，本文要说明的就是，负的 margin 值并不是 hack，这是正常范围内的写法。

Negative values for margin properties are allowed, but there may be implementation-specific limits. —— W3C

根据 W3C，margin 是能够接受负值的，只是在具体实现上有一些区别。

那么，设置 margin 为负值究竟会是什么样的效果呢?

与设置正值不同，margin 设置负值需要根据设置的方向以及元素是否浮动以及其定位方式来判断最终的行为。

所以，具体行为按照以下几种情况说明。

***种情况：元素没有设置浮动且没有设置定位或者 position 为 static

如果元素没有设置浮动并且没有设置定位或者 position 属性为 static 的情况下，对元素的 margin 设置负值会有以下的效果：

设置的 margin 的方向为 top 或者 left

当设置负值的 margin 的方向为 top 或者 left 的时候，元素会按照设置的方向移动相应的距离。

比如，设置 margin-left: -100px;。那么，元素会往左移动 100px。对于设置 margin-top 也是一样的道理。

设置的 margin 的方向为 bottom 或者 right

当设置负值的 margin 的方向为 bottom 或者 right 的时候，元素本身并不会移动，元素后面的其他元素会往该元素的方向移动相应的距离，并且覆盖在该元素上面。

比如，设置 margin-right: -100px;。那么，元素本身并不会移动，后面的元素会向左移动 100px 到该元素上。对于设置 margin-bottom 也是同样的道理。

同时，在元素不指定宽度的情况下，如果设置 margin-left 或者 margin-right 为负值的话，会在元素对应的方向上增加其宽度。效果就和设置 padding-left 或者 padding-right 一样。

第二种情况：元素没有设置浮动且 position 为 relative

如果元素没有设置浮动，但是设置了相对定位，设置 margin 为负值的时候，表现如下：

设置的 margin 的方向为 top 或者 left

当设置负值的 margin 的方向为 top 或者 left 的时候，元素也会按照设置的方向移动相应的距离。

设置的 margin 的方向为 bottom 或者 right

当设置 margin-bottom/left 的时候，元素本身也不会移动，元素后面的其他元素也会往该元素的方向移动相应的距离，但是，该元素会覆盖在后面的元素上面 (当然，此处说的情况肯定是后面的元素没有设置定位以及 z-index 的情况)。

第三种情况：元素没有设置浮动且 position 为 absolute

如果元素没有设置浮动，但是设置了绝对定位，设置 margin 为负值的时候，表现如下：

设置的 margin 的方向为 top 或者 left

当设置负值的 margin 的方向为 top 或者 left 的时候，元素也会按照设置的方向移动相应的距离。

设置的 margin 的方向为 bottom 或者 right

由于设置绝对定位的元素已经脱离了标准文档流，所以，设置 margin-right/bottom 对后面的元素并没有影响。

第四种情况：元素设置了浮动

肯定没有既设置了浮动又设置绝对定位的情况，那样太荒唐了。

设置了浮动的元素，再设置 postion: relative; 的话，元素的行为和单独设置 float 是一样的。

对于设置了浮动的元素，设置 margin 为负值的时候，表现如下：

如果设置的 margin 的方向与浮动的方向相同，那么，元素会往对应的方向移动对应的距离。

比如：

 
 
  
  .elem { 
  
   
  
    float: right; 
  
   
  
    margin-right: -100px; 
  
   
  
  }

该元素则会向右移动 100px。

如果设置 margin 的方向与浮动的方向相反，则元素本身不动，元素之前或者之后的元素会向钙元素的方向移动相应的距离。

比如：

 
 
  
  .elem { 
  
   
  
    float: right; 
  
   
  
    margin-left: -100px; 
  
   
  
  }

位于该元素左边的元素则会向右移动 100px，同时覆盖在该元素上。

如果后面的元素也设置了浮动的话，我们以一个具体的例子来说明。

.container {
min-height: 300px;
margin: 30px auto;
overflow: hidden;
border: 1px solid #000000;
.left {
float: left;
width: 400px;
height: 200px;
margin-right: -300px;
background: purple;
}
.right {
float: left;
width: 300px;
height: 200px;
background: #cccccc;
}
}

.title {
position: relative;
width: 200px;
height: 60px;
margin-bottom: -30px;
margin-left: -20px;
background: #000000;
}
.content {
max-width: 800px;
height: 400px;
padding: 0 50px;
background: yellow;
}

.left {
float: left;
width: 100%;
height: 200px;
margin-right: -300px;
background: purple;
}
.right {
float: left;
width: 300px;
height: 200px;
background: #cccccc;
}

.left {
width: 300px;
background: #000000;
}
.right {
width: 400px;
background: #00FFFF;
}
.center {
width: 100%;
background: #93c759;
}

.container {
overflow: hidden;
.left,
.right,
.center {
float: left;
height: 500px;
}
.left {
width: 300px;
margin-left: -100%;
background: #000000;
}
.right {
width: 400px;
margin-left: -400px;
background: #00FFFF;
}
.center {
width: 100%;
background: #93c759;
}
}