将子元素的margin-top传递给父元素
分类：实例代码
可能不少朋友遇到这样的问题，那就是子元素的margin-top传递给父元素。
这通常并不是我们想要的效果，代码实例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style type="text/css">
#box {
width:200px;
height:200px;
background:#ccc;
}
#antzone {
width:100px;
height:100px;
background:blue;
margin-top:50px;
}
</style>
</head>
<body>
<div id="box">
<div id="antzone"></div>
</div>
</body>
</html>
上面代码的表现仿佛是margin-top:50px添加到了父元素身上。
这个现象是外边距合并的一种，具体可以参阅margin外边距合并详解一章节。
一线大厂高级前端编写，前端初中阶面试题，帮助初学者应聘，需要联系微信：javadudu