本文中的样式代码使用了SCSS。浏览器兼容性为IE6+。在你的网页中，不使用边距是不可能的。大多数情况下，我们使用正边距值，有时也可能使用负边距值。在我们的印象中，负边距值类似于浏览器hack，不被接受。不过，本文要说明的是，负的margin值并不是hack，写在正常范围内。margin属性的负值是允许的，但可能会有特定于实现的限制。——W3C根据W3C的说法，margin可以接受负值，但在具体实现上有一些差异。那么，将margin设置为负值有什么影响呢？与设置正值不同，设置margin为负值需要根据设置的方向、元素是否浮动及其定位方式来判断最终的行为。因此，在以下情况中描述了具体行为。第一种情况：元素未浮动且未设置定位或position为static如果元素未浮动且未设置定位或position属性为static，则将元素的margin设置为负值会有效果如下：设置外边距的方向为上或左。当设置负边距的方向为top或left时，元素会按照设置的方向移动相应的距离。例如，设置margin-left:-100px;。然后，该元素将向左移动100px。设置margin-top也是一样。设置边距的方向为底部或右侧。当负边距的方向设置为bottom或right时，元素本身不会移动，元素后面的其他元素会向元素的方向移动相应的距离，覆盖元素的上方。例如，设置margin-right:-100px;。然后，元素本身不会移动，后面的元素会在元素上向左移动100px。设置margin-bottom也是如此。同时，如果元素没有指定宽度，如果margin-left或margin-right设置为负值，则其宽度会在元素对应的方向增加。效果与设置padding-left或padding-right相同。第二种情况：元素没有设置为浮动且位置是相对的如果元素没有设置为浮动，而是设置为相对定位，当margin设置为负值时，表现如下：方向设置margin的方向为top或left时设置负值当margin的方向为top或left时，元素也会按照设置的方向移动相应的距离。设置边距的方向为底部或右侧。当设置了margin-bottom/left时，元素本身不会移动，元素后面的其他元素也会向元素的方向移动相应的距离，但是元素会覆盖在后面的元素之上（当然，这里说的情况一定是后面的元素没有设置定位和z-index的情况）。第三种情况：元素没有设置为浮动且定位为绝对如果元素没有设置为浮动，而是设置为绝对定位，当设置margin为负值时，表现如下：方向设置的margin为top或left当设置为负值时margin的方向为top或left时，元素也会按照设置的方向移动相应的距离。设置边距的方向为底部或右侧。由于绝对定位的元素不在标准文档流中，设置margin-right/bottom对后面的元素没有影响。第四种情况：如果元素设置为float，那肯定没有float和absolute定位都设置的情况，那可笑了。如果你设置一个浮动元素然后设置position:relative;，元素的行为与单独设置float是一样的。对于设置为浮动的元素，当margin设置为负值时，表现如下：如果设置的margin的方向与浮动的方向相同，则元素将移动相应的距离相应的方向。例如：.elem{float:right;margin-right:-100px;}元素将向右移动100px。如果设置margin的方向与浮动方向相反，则元素本身不会移动，元素前后的元素会向钙元素的方向移动相应的距离。例如：.elem{float:right;margin-left:-100px;}位于元素左边的元素会向右移动100px，同时覆盖元素。如果下面的元素也设置为浮动，我们用一个具体的例子来说明。
