CSS-Margin-Top auf innerem div, der das übergeordnete div nach unten drückt [duplicate] - css, html

Ich versuche, das Child-Div 5px im Eltern-Div nach unten zu drücken. Wenn ich stelle Rand oben: 5px; auf dem inneren div drückt er beide inneren nach untendiv und das übergeordnete div aus dem div über dem übergeordneten div, drücken das innere div jedoch nicht vom übergeordneten div ab. Wie kann ich es so einstellen, dass nur das innere div 5px vom übergeordneten div nach unten gedrückt wird? Ich möchte nicht, dass das übergeordnete div vom div darüber drückt. Danke für jede Hilfe.

HTML für die Navigation:

<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 für die Navigation:

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

Hier ist die URL, falls Sie die Site sehen wollen: http://redlakewalleye.designangler.com/

Antworten:

Anstelle einer margin-top auf dem Kind sollten Sie eine verwenden padding-top zum Elternteil.

AKTUALISIERT (als Reaktion auf Ihren Kommentar)

Eine Marge braucht etwas, auf das Sie springen können. Da das übergeordnete div nichts aufprallen kann, wird es auf dem Element darüber abprallen. Dafür sollten Sie Polsterung verwenden.

Das Problem führt zum Zusammenbruch der Margen, wenn sich die Margen berühren http://www.sitepoint.com/web-foundations/collapsing-margins/