“margin，我開始明白你的內(nèi)心了。以前我看效果都是用肉眼來看，但是在我理解的那一剎那智哀，我開始用更深的邏輯來理解頁面展示，所有的元素排布真的可以看的深入原理般的清楚……原來你也有里層的繞指柔”
——題記荧恍，改編源自《大圣娶親》
正文
在接觸margin的時候瓷叫，知道它是個外邊距，用來距離其他元素的名詞块饺。當(dāng)遇到margin沒達(dá)到效果的時候赞辩，那就用padding，實(shí)現(xiàn)效果還不容易授艰”嫠裕可是，你就不想知道為什么沒有出現(xiàn)想要的效果淮腾，這到底為啥糟需？今天便來總結(jié)一番，一個一個來谷朝。
先上html洲押，看下web結(jié)構(gòu)：
好的，我們先來看margin為0的情況圆凰，正常杈帐，木有空隙：
然后設(shè)置第一個p為margin-top:1rem情況：
section為margin-top: 1rem的情況，也就是p的父容器：
有沒有發(fā)現(xiàn)圖2和圖3是一樣的专钉，繼續(xù)看section和第一個p的margin-top: 1rem的情況：
圖2,3,4間距是一樣的挑童，繼續(xù)看section為1rem，第一個p為2rem：
發(fā)現(xiàn)事實(shí)上顯示結(jié)果是父容器與第一個子元素的margin-top值是最大的那個值，也就是例子的2rem菇民【⌒ǎ看第一二兩個p的margin-top值為1rem：
并無特別，繼續(xù)看第一個p的margin-top：1rem第练；margin-bottom：1rem：
設(shè)置第二個p的margin-top: 1rem
發(fā)現(xiàn)第一個p的margin-bottom跟第二個p的margin-top合并成一個阔馋，改變第二個的margin-top值為2rem：
發(fā)現(xiàn)事實(shí)上顯示的是2rem，顯示最大的那個值娇掏，咋說垦缅，我們可以發(fā)現(xiàn)：
而如果其中有負(fù)值，則是兩個margin值的相加驹碍，而不是取最大值壁涎。
【只有普通文檔流中塊框的垂直外邊距才會發(fā)生合并，行內(nèi)框志秃、浮動框或絕對定位之間的外邊距不會合并怔球。】解決方法：利用padding來代替margin浮还，或巧妙的利用margin值竟坛，或改為行內(nèi)元素，或采用同一方向的margin钧舌，或浮動元素等
還有一點(diǎn)担汤，margin若設(shè)為百分比值，相對的參照物是其父元素的寬度洼冻，這個不知道的話開發(fā)的時候可能會有坑崭歧，本文運(yùn)行環(huán)境是chrome，以及不同瀏覽器的margin的坑是不一樣的撞牢，這個網(wǎng)上的一篇文章寫的還是可以參考的率碾。
該篇文章主要說明垂直外邊距的合并，可能在你遇到問題的時候印象會深些屋彪，不過本文還是一步步把它寫出來所宰，如果你在某個時刻看到，知道畜挥，誒仔粥，原來margin還有這樣的一面，那這篇文章也就開心了~
