<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../jquery.js" id="hi"></script>
</head>
<body>
<style>
body{
margin:0;
padding:0;
}
#box{
200px;
background: blue;
float: left;
}
.child{
height: 100px;
100px;
background: red;
/*margin-top: 10px; */
margin-bottom: 10px;
/*float: left;*/
}
</style>
<div id="box">
<!-- margin-top无效，效果'转'给了父级 -->
<div class="child">hahah</div>
<!-- margin-top有效 -->
<div class="child">hahah</div>
解决方法：给父级添加float:left设置浮动 或 给父级添加padding:10px
</div>
</body>
</html>