一段無解的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>

效果如下：

如果上述理解正確，那么這里是合理的！