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




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

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

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