演示代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="reset.css"/>
<style type="text/css">
.box{
width: 400px;height: 400px;background-color: #ff0000;
/* border-top: 1px solid #0000ff; */
/* overflow: hidden; *//* 外边距击穿处理方法一:父元素溢出隐藏 */
/* padding-top: 1px; *//* 外边距击穿处理方法二:父元素设置内边距 */
border-top: 1px solid #ff0000;/* 外边距击穿处理方法三:父元素设置边框 */
}
.wyzx{
width: 200px;height: 200px;background-color: #00ff00;
margin-top: 100px;
}
</style>
</head>
<body>
<!--
相邻元素外边距重叠
相邻定义：同级或者嵌套的盒/块级元素，
但是他们之间有且只能有空内容，并且父元素没有内边距或边框分割
不是块级元素，不会出现margin击穿；行级或行内块级会出现。
-->
<!-- div.box>div.wyzx -->
<div class="box">
<!-- <p>我要自学</p> -->
<div class="wyzx">
</div>
<!-- <img class="wyzx" src="bj.jpg" > -->
</div>
</body>
</html>
