CSS margin-top on inner div pushing parent div down

Question

I am trying to push the child div down 5px inside of the parent div. When I put margin-top:5px; on the inner div it pushes down both the inner div and the parent div from the div above the parent div, but does not push the inner div down from the parent div. How to I set it so that only the inner div is pushed down 5px from the parent div? I do not want the parent div to push down from the div above it. Thanks for any help.

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

Here is the url in case you want to see the site: http://redlakewalleye.designangler.com/

This is called *margin collapse*. – cimmanon Aug 23 '13 at 19:18 — cimmanon, Aug 23 '13 at 19:18

GreyRoofPigeon · Accepted Answer · 2013-08-23T19:04:44.673

13

Instead of a margin-top on the child, you should use a padding-top to the parent.

UPDATED (as a reaction on your comment)

A margin needs something to bounce on. Since the parent div has nothing to bounce on, it will bounce on the element above it. Therefor you should use padding.

edited Aug 23 '13 at 19:04

answered Aug 23 '13 at 18:54

GreyRoofPigeon

17,833
4
36
59

1

That seemed to work, thank you. Could you possible give me an explanation why the child div having a margin-top pushed the parent down as well? – Phorden Aug 23 '13 at 19:00
I updated my answer, hope you understand it. Kinda hard to explain. – GreyRoofPigeon Aug 23 '13 at 19:05
4

Also - padding is applied to the inside of an element, while margin gets applied to the outside. In certain circumstances, this means that the parent element's size or position will be affected in addition to/instead of the child element. I've found, in general, it's best to use `padding` when shifting items in relation to their parent, and `margin` when shifting items in relation to siblings (ie - `margin-left:5px` to add space between two floated elements). – Shauna Aug 23 '13 at 19:09
@LinkinTED, could you please explain 'margin needs something to bounce on'?? what is something? border? I didn't understand, still trying hard to get my head into right place with CSS. Thank You – Pritam Bohra Jun 26 '19 at 19:20
1

@pritambohra A margin has no effect is there arent any element under it. So if the div is at the end of the body, you wont see it. It needs to bounce against something. So youll need to add an element. But as alternative you can add padding top to the parent. The margin then bounce against it. That makes it visible – GreyRoofPigeon Jun 27 '19 at 23:04

score 0 · Answer 2 · answered Jun 24 '14 at 14:24

0

The issue is collapsing margins when margins touch - http://www.sitepoint.com/web-foundations/collapsing-margins/

answered Jun 24 '14 at 14:24

Blue Waters

725
1
4
17

CSS margin-top on inner div pushing parent div down

2 Answers2