一段无解的CSS，不知道原因！

首先定义一个外围的div，设置其背景颜色为green，然后再里面定义一个div，这个div设置上外边距为20像素 代码类似于这样

 

 <style type="text/css">
       body{color:#fff;}
        .pagecontent2
        {
            background: red;
        }
    </style>

 <div class="pagecontent2" id="parentdiv">
        <div style="margin-top: 20px;" id="childdiv">
            12
        </div>
    </div>

按照我预想的效果是这样：

但是结果显示的却是：

也就是说id为childdiv的div的margin-top不是在父节点元素id为parentdiv 内进行上边距调整，而是基于body！

但是代码如下又是预料的结果：

<div class="pagecontent2" id="parentdiv">1
        <div style="margin-top: 20px;" id="childdiv">
            12
        </div>
    </div>

注意，这里在id为parentdiv的div多加了一个1，让其不仅只包含一个子div元素，也就是说如果上一个元素内容不为空，则下一个元素则基于上元素来进行调整！

但是代码换成这样：

 <div class="pagecontent2" id="parentdiv">
        <div style="margin-top: 20px;" id="childdiv">
            12
        </div>
        <div style="margin-top: 20px;" id="Div1">
            12
        </div>
    </div>

效果如下：

如果上述理解正确，那么这里是合理的！