麻煩推動下跌

Question

我確定這是非常簡單的，但我一直在看這一段時間今天，只是無法弄清楚。

我想要做的就是將頂部div'＃template-nav'向下移動一點，所以上面有一些空白區域。我已經嘗試了邊緣頂部和填充，但它不會向下移動。

我有jsfiddle以下的代碼，非常感謝，找出我在這裏出錯的地方。

https://jsfiddle.net/rufusbear/Lgx7eksa/

<div id="template"> 
    <div class="template-row"> 
    <div id="template-nav"></div> 
    </div> 
    <div class="template-row"> 
    <div id="template-jumbo"></div> 
    </div> 
    <div class="template-row"> 
    <div class="template-col-1"></div> 
    <div class="template-col-2"></div> 
    </div> 
    <div class="clearfix"></div> 
    <div class="template-row"> 
    <div id="template-footer"></div> 
    </div> 


</div> 

#template { 
    background: #fff; 
    width: 400px; 
    height: 400px; 
    margin-top: 10%; 
} 

.template-row { 
    max-width: 380px; 
    margin: 0 auto; 
} 

#template-nav { 
    height: 40px; 
    background: #8dcdc1; 
    padding-top: 10px; 
} 

#template-jumbo { 
    height: 150px; 
    margin: 2% 0%; 
    background: #d3e397; 
} 

.template-col-1 { 
    height: 130px; 
    width: 48%; 
    float: left; 
    margin-right: 2%; 
    background: #fff5c3; 
} 

.template-col-2 { 
    height: 130px; 
    width: 48%; 
    float: left; 
    margin-left: 2%; 
    background: #fff5c3; 
} 

#template-footer { 
    height: 40px; 
    margin: 2% 0%; 
    background: #d3e397; 
} 

.clearfix:after { 
    content: '.'; 
    clear: both; 
    display: block; 
    height: 0; 
    visibility: hidden; 
} 

感謝所有

Answer 1

添加邊距到頂級元素中#template將無法​​正常工作，由於元件的邊緣，其頂部的孩子互相影響。 但你可以添加一個padding-top到#template：

https://jsfiddle.net/wh6cgLt0/

Answer 2

#template { 
    background: #fff; 
    width: 400px; 
    margin-top: 10%; 
/* removed height property */ 
    padding: 10px 0; /* adds padding to top and bottom evenly */ 
} 

只是一個基本的CSS編輯....

Fiddle update