我們?cè)诮odiv設(shè)置margin屬性的時(shí)候，會(huì)出現(xiàn)margin 合并的問題。

Q：什么是margin合并呢？

A：我們可以根據(jù)一個(gè)具體的例子來看一下。

兄弟之間的合并：

比如我這里給 child1 和 child2這兩個(gè)兄弟div 都設(shè)置了margin 屬性，按理來說，兩者之間的間距應(yīng)該是 60px 才對(duì)。

但是打開F12一查發(fā)現(xiàn)，竟然是30px。 也就是兩者之間設(shè)置的間距其實(shí)是合并起來的。

Q：那我要怎么才能解決這種兄弟之間margin 合并的問題呢？

A：只要給這兩個(gè)兄弟div 的其中一個(gè)或者兩個(gè)設(shè)置成 display:inline-block 這個(gè)屬性，那么就不會(huì)出現(xiàn)這種margin合并的問題了。

父母與孩子之間的合并：

這種情況就是，孩子的margin和父母的margin合并了，本來父母設(shè)置了 margin:15px 這個(gè)屬性，再加上child所設(shè)置的30px 的marigin ，相加應(yīng)該是45px 的間距了，但是事實(shí)卻是，最終只顯示了30px，也就是child 的margin，感覺父母的margin:15px 就被覆蓋掉了。

注意：無論是哪種類型的合并，都是只有上下的margin會(huì)合并，左右的是不會(huì)被合并的。

Q：那我要怎么才能解決這種父母和孩子之間margin合并呢？

A：

方法1：給父母設(shè)置一個(gè)border屬性。

方法2：把border-top 改為padding-top 也行。

其實(shí)就是強(qiáng)行在parent 和child 之間加上點(diǎn)東西，你加上了 東西之后，你總不能把我中間的東西給合并掉吧。

方法3：給父元素設(shè)置一個(gè) overflow:hidden 的屬性。