問(wèn)題： 給一個(gè)div添加margin-top發(fā)現(xiàn)效果作用在了父元素上，就是說(shuō)，看起來(lái)是父元素加了margin
html:
<body>
<div class="partner">
<div class="child"></div>
</div>
</body>
style:
body{
background:#dddddd;
margin:0;
padding: 0;
}
.partner{
width:200px;
height:200px;
background:pink
}
.child{
width:100px;
height:100px;
background:burlywood;
}
此時(shí)沒(méi)加margin,效果圖如下：
未加margin
此時(shí)
div緊靠在左上角。
給.child添加margin-top:30px之后，我們?cè)O(shè)想的是子元素與父元素之間會(huì)有30px的間距，查看下方效果圖發(fā)現(xiàn)，明顯與我們?cè)O(shè)想不一致
添加margin-top
此時(shí)發(fā)現(xiàn)，父元素上方出現(xiàn)30px的距離。
原因：
所有毗鄰的兩個(gè)或更多盒元素的margin將會(huì)合并為一個(gè)margin共享之。毗鄰的定義為：同級(jí)或者嵌套的盒元素，并且它們之間沒(méi)有非空內(nèi)容、 Padding或Border分隔。 CSS2.1規(guī)定浮動(dòng)元素和絕對(duì)定位元素不參與Margin折疊
如何解決？
既然已經(jīng)知道是
margin發(fā)生了重疊，并且知道了浮動(dòng)元素和絕對(duì)定位元素不會(huì)出現(xiàn)margin折疊，那就讓他們變成浮動(dòng)或者定位元素就好了呀所以，我們可以用
padding代替margin,或者給父元素加border讓兩個(gè)元素分隔開(kāi)，再或者你可以試試float、overflow、position呀
