子元素設(shè)置的margin屬性居然不能把父元素?fù)未?？只有父元素設(shè)置了border才可以，為什么？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.d1{
width: 50px;
height: 50px;
? ? ? ? ? ? padding: 150px;
? ? ? ? ? ? background-color: red;
? ? ? ? ? ? margin:200px;
? ? ? ? ? ? border: 1px solid #000;
}
.d2{
background:#0f0;
/*border: 1px solid yellow;*/ ?/* 加上這句之后，d1的margin才能把他的父容器d2撐起來(lái)，為什么*/
}
</style>
</head>
<body>
<div>
<div>打阿凡達(dá)的非官方</div>
</div>
</body>
</html>
2016-11-05
這是margin塌陷的幾種情況之一，另外的你可以google其他幾種情況。我在這里說(shuō)一種情況，即樓主所遇到的情況：父子級(jí)margin。
首先大概說(shuō)一下BFC。box的上下間距是有margin決定的，同一個(gè)BFC中的box會(huì)發(fā)生margin坍塌（也叫margin重疊）現(xiàn)象，這里注意，說(shuō)的是上下margin。所以不同BFC的box不會(huì)發(fā)生margin坍塌現(xiàn)象。
在父子級(jí)嵌套中，若父級(jí)沒(méi)有border/padding-top，也沒(méi)有空標(biāo)簽清浮動(dòng)，總而言之就是沒(méi)有觸發(fā)BFC的時(shí)候，此時(shí)只給自己設(shè)置margin-top,會(huì)傳遞給父級(jí)，也就是樓主所說(shuō)的現(xiàn)象。為了避免margin坍塌現(xiàn)象，就要通過(guò)各種方式觸發(fā)BFC。
觸發(fā)BFC的幾種方式：
1。overflow:hidden/auto/scroll;
2.position不是static也不是relative；
3.float不是none；
4.display是table-cell或inline.
2019-04-26
必須贊！
2016-10-25
你沒(méi)設(shè)置父元素border時(shí)，子元素的margin是子元素與外部邊緣的距離，設(shè)置時(shí)子元素的margin就是與父元素邊框的距離，看這樣能不能理解。
2016-10-25
margin的值分別是父元素與外部邊緣的距離，子元素與父元素邊框的距離，領(lǐng)會(huì)就好。
2016-10-25
margin是外邊距的屬性，而border是邊框的屬性，border可以改變盒子的寬度和高度，margin不可。