1

我正在尝试将子 div 在父 div 内向下推 5px。当我放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/

4

2 回答 2

12

而不是margin-top对孩子使用a，而应该padding-top对父母使用a。

已更新（作为对您评论的回应）

保证金需要一些东西来反弹。由于父 div 没有可反弹的内容，因此它将在其上方的元素上反弹。因此，您应该使用填充。

于 2013-08-23T18:54:56.383 回答
0

问题是边距接触时边距折叠 - http://www.sitepoint.com/web-foundations/collapsing-margins/

于 2014-06-24T14:24:37.750 回答