問(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
呀