父元素设置高度，子元素设置margin-bottom为何无效
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>margin传递</title>
<style type="text/css">
body {
margin: 0;
}
.d1 {
background-color: #6183F3;
height: 100px;
}
.da {
background-color: #D60003;
height: 200px;
}
.db {
width: 200px;
height: 200px;
background-color: #FF8D8F;
margin: 10px;
}
.dc {
height: 100px;
background-color: #6E0001;
}
</style>
</head>
<body>
<div class="d1"></div>
<div class="da">
<div class="db"></div>
</div>
<div class="dc"></div>
</body>
</html>
da的子元素dd设置外边距之后左右边距和上边距都出现了外边距，但是为何margin-bottom不把dc（深红色）往下移10px，
知道解决办法，但是就是想请问大神们为何会造成这个现象？非常感谢
南宁吴彦祖浏览 6260回答 3
3回答
-
echo_kinchao
是不是触发了上下级文本呢 -
宝慕林6972327
因为db是da的子节点，对子节点margin-top或者margin-bottom会作用到父级上，这就是所谓的margin重叠。 -
Siming0
父级你设定了高度了，就会到子集的样式给包裹在高度以内了，你没有设置宽度所以设置外边距之后左右边距和上边距都出现了外边距
随时随地看视频慕课网APP
CSS3
Html/CSS
Html5