W3C規(guī)范在介紹margin時(shí)有這樣一句話：
Negative values for margin properties are allowed, but there may be implementation-specific limits.
于是，聰明的開發(fā)者們就發(fā)現(xiàn)了很多負(fù)邊距的巧妙用法。
比如，他可以增加一個(gè)不定寬塊框的寬度，他可以讓一個(gè)框向上移動(dòng)去覆蓋另一個(gè)框，他可以讓文字移動(dòng)去覆蓋文字，也可以讓浮動(dòng)框移動(dòng)去覆蓋另一個(gè)浮動(dòng)框。
利用這些特點(diǎn)，我們可以實(shí)現(xiàn)圣杯布局和雙飛翼布局、等高布局、多列布局等等實(shí)用的布局方式。
那么負(fù)邊距到底是如何工作的呢？也就是說，這些現(xiàn)象要怎么解釋？
我是這樣理解的：
在可視化格式模型中，一切都是框。所有的框都處于流動(dòng)狀態(tài)。就像是一個(gè)個(gè)漂浮在水上的小木塊兒，水會(huì)將他們往一個(gè)地方推。
而邊距，就是用于截流。就像是將一條河截成兩段之后，后一段的水流就無法影響到前一段水流中的小木塊了兒。
普通流（normal flow）：
普通流中有塊級(jí)格式化上下文和行內(nèi)級(jí)格式化上下文。
在塊級(jí)格式化上下文中，塊級(jí)框占滿一行，從上到下依次排列。占滿一行意味著，如果他沒有被設(shè)置寬度的話，他就會(huì)橫向填充滿整個(gè)包含框。
所以，塊級(jí)格式化上下文中的流應(yīng)該是這樣的：
所以，給第一個(gè)p元素設(shè)置margin-bottom:10px;的意思就是在第一個(gè)p元素的border-bottom邊線下10px的位置，設(shè)置一條攔截線，阻止之后的框被水流沖過這條線。
而如果設(shè)置margin-bottom:-10px的話，攔截線就會(huì)被設(shè)置在第一段文字border-bottom邊線上10px的位置，之后的框會(huì)從那里開始流動(dòng)，也就是會(huì)覆蓋住第一段文字10px。按照這個(gè)邏輯，在這個(gè)例子中，給第一段文字設(shè)置margin-bottom:-10px和給的二段文字設(shè)置margin-top:-10px的效果是相同的，因?yàn)樗麄兌及褦r截線設(shè)置在了同一個(gè)地方。
