看了一些网上有关负边距解释的文章，意思是懂了，但是大多数文章逻辑是相当混乱的，所以决定重新梳理一下对负边距效果的解释！



首先，在了解负边距效果之前，需要确认两点：

1、负边距是合法的，是W3C认同的。

2、负边距兼容性较好，被现代主流浏览器支持。


然后就是关键，负边距对于  有长宽 和 没有长宽  元素的处理方式


一、有长宽的，例如块级元素设置了长宽

遵循如下图的规则：

5637680cc060c_articlex

对于margin-top和left来说，都是直接平移10px，对于right和bottom来说，是元素往里面拉，但是自己的位置不会变化，比如下面的bottom，如果底下有一个段落，会往上提10px，紧挨着的话，就会发生重叠的现象。

同时，浮动元素也适用本规则！


二、没有长宽  比如，内联元素，没有设置宽高的块级元素


规则是，无论怎么设置负边距，对于长来说，margin的左右的值+padding左右的值+border左右的值+width的值，一定是等于父元素的宽，所以你会看到，一个没有设置宽高的段落，同时设置


p{margin-left：-100px；margin-right：-100px；}

wKioL1ci75qwtMLwAADo0f-5QlY536.png

如图，虚线两边的边框已经超出了实线两边的边框