困ったことにdivを動かす

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; 
} 

要素とそのトップ子供のマージンがお互いに影響を与えるので、おかげで#template内部にその先頭要素にマージントップを追加するすべての

Answer 1

は、動作しません。 しかし、あなたは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