子元素設置的margin屬性居然不能把父元素撐大？只有父元素設置了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撐起來，為什么*/
}
</style>
</head>
<body>
<div>
<div>打阿凡達的非官方</div>
</div>
</body>
</html>
2016-11-05
這是margin塌陷的幾種情況之一，另外的你可以google其他幾種情況。我在這里說一種情況，即樓主所遇到的情況：父子級margin。
首先大概說一下BFC。box的上下間距是有margin決定的，同一個BFC中的box會發生margin坍塌（也叫margin重疊）現象，這里注意，說的是上下margin。所以不同BFC的box不會發生margin坍塌現象。
在父子級嵌套中，若父級沒有border/padding-top，也沒有空標簽清浮動，總而言之就是沒有觸發BFC的時候，此時只給自己設置margin-top,會傳遞給父級，也就是樓主所說的現象。為了避免margin坍塌現象，就要通過各種方式觸發BFC。
觸發BFC的幾種方式：
1。overflow:hidden/auto/scroll;
2.position不是static也不是relative；
3.float不是none；
4.display是table-cell或inline.
2019-04-26
必須贊！
2016-10-25
你沒設置父元素border時，子元素的margin是子元素與外部邊緣的距離，設置時子元素的margin就是與父元素邊框的距離，看這樣能不能理解。
2016-10-25
margin的值分別是父元素與外部邊緣的距離，子元素與父元素邊框的距離，領會就好。
2016-10-25
margin是外邊距的屬性，而border是邊框的屬性，border可以改變盒子的寬度和高度，margin不可。