css margin-top属性不起作用的几个原因

<code class="language-html">


<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="author" content="http://www.softwhy.com/">
<title>蚂蚁部落</title>
<style type="text/css">
.first{
  width:100px;
  height:100px;
  background-color:red;
  margin-bottom:60px;
}
.second{
  width:100px;
  height:100px;
  background-color:green;
  margin-top:40px;
}
</style>
<div class="first"></div>
<div class="second"></div>

</code>

<code class="language-html">


<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="author" content="http://www.softwhy.com/">
<title>蚂蚁部落</title>
<style type="text/css">
.father{
  width:300px;
  height:300px;
  background-color:red;
  margin-top:20px;
}
.children{
  width:100px;
  height:100px;
  background-color:blue;
  margin-top:10px;
}
</style>
<div class="father">
  <div class="children"></div>
</div>

</code>