內部div的CSS邊緣頂部推父母div下來

Question

我想推動父div下5px的子div。當我把margin-top：5px;在內部div上，它會從父級div上方的div下推內部div和父級div，但不會從父級div推下內部div。如何設置它，以便只有內部div從父div下推5px？我不希望父div從它上面的div中推下去。謝謝你的幫助。

的HTML導航：

<nav> 
    <div class="nav-container"> 
     <div id="cat_14623_divs"> 
      <ul id="nav_14623"> 
       <li><a href="#" onclick="return false;">AKINA &amp; RED LAKE</a</li>  
       <li><a href="#" onclick="return false;">FRESH WILD CAUGHT FISH</a> 
        <ul id="navsub_14623_2326"> 
         <li><a href="#" onclick="return false;">WALLEYE</a></li> 
         <li><a href="#" onclick="return false;">PERCH</a></li> 
         <li><a href="#" onclick="return false;">CRAPPIE</a></li> 
         <li><a href="#" onclick="return false;">NORTHERN</a></li> 
         <li><a href="#" onclick="return false;">WHITEFISH</a></li> 
        </ul></li> 
       <li><a href="#" onclick="return false;">NEWS FROM THE FISHERY</a></li> 
       <li><a href="#" onclick="return false;">CONTACT US</a></li> 
       <li class="last"><a href="#" onclick="return false;">FAQs</a></li> 
     </ul> 
     </div> 
    </div> 
</nav> 

CSS的導航：

nav{ 
position:relative; 
width:960px; 
background-color:#660000; 
height:40px; 
} 

div.nav-container{ 
position:relative; 
width:100%; 
} 

#cat_14623_divs{ 
margin-top:5px; 
height:30px; 
background-color:#520000; 
width:960px;  
} 

#nav_14623{ 
list-style:none; 
display:block; 
padding:0; 
width:80%; 
margin:0 auto; 
} 

#nav_14623 li{ 
position:relative; 
float:left; 
padding: 0.5em 1.5em; 
margin: 0px; 
font-size:12px; 
border-right:solid 2px #fff; 
text-align:center; 
} 

#nav_14623 li.last{ 
border-right:none; 
padding-right:5px; 
} 

#nav_14623 li a{ 
color:#FFF; 
text-decoration:none; 
} 

#nav_14623 ul{ 
position: absolute; 
left:0; 
top: 100%; 
display: none; 
    padding: 0 1000em; /* trick from css-tricks comments */ 
    margin: 0 -1000em; /* trick from css-tricks comments */ 
list-style: none; 
margin-left: 0px; 
margin: 0; 
padding: 5px; 
width:200px; 
z-index: 1000; 
background: #660000; 
    border-left: 1px solid #336699; 
    border-right: 1px solid #336699; 
    border-bottom: 1px solid #336699; 
    border-top: none; 
} 

#nav_14623 ul li{ 
position: relative; 
float: none; 
border-right: none; 
padding:0; 
margin: 0; 
} 

#nav_14623 ul li a{ 
color: #fff; 
font-size: 12px; 
vertical-align: middle; 
line-height:32px; 
width: 100%; 
height:35px; 
display:block; 
} 

#nav_14623 ul li a:hover{ 
background: #520000; 
width: 100%; 
} 

#nav_14623 li:hover > ul{ 
display: block; 
} 

#nav_14623:after { 
content: ""; clear: both; display: block; 
} 

這裏是你想看到的網站在案件的網址：上 http://redlakewalleye.designangler.com/

Answer 1

取而代之的是margin-top的孩子，你應該使用padding-top父母。

被更新（如您的評論的反應）

保證金需要一些反彈上。由於母公司沒有什麼可以反彈，它會反彈在它上面的元素。因此你應該使用填充。

Answer 2

問題是當邊距觸碰時摺疊邊距 - http://www.sitepoint.com/web-foundations/collapsing-margins/