Why is the css margin of inner element pushing down the outer element? -


i have following code.

<!doctype html> <html> <head> <title>home</title> <meta name="viewport" content="width=device-width, maximum-scale=1.0,initial-scale=1.0, user-scalable=no" /> <style type="text/css"> #nav {display:block; width:100%; height:80px; text-align:center;             background: -webkit-gradient(linear,left top, left bottom, from(#2b2b2b), to(#111));             background: -moz-linear-gradient(center top , #2b2b2b, #111) repeat scroll 0 0 transparent;             filter: progid:dximagetransform.microsoft.gradient(startcolorstr='#2b2b2b', endcolorstr='#111111');             -ms-filter: progid:dximagetransform.microsoft.gradient(startcolorstr='#2b2b2b', endcolorstr='#111111');         }    #nav li {display:inline-block; width:19%; height:100%;} #nav li.active {background-color:#333;} #nav {display:block; width:100%; height:100%; position:relative; background:blue;} #nav span {display:block; position:absolute; bottom:0.5em; text-align:center; width:100%; font-size:0.9rem;} #nav .img {position:relative; width: 40px; height: 40px; background-color: #ccc; display:block; margin:10px auto 0 auto; padding:0;}  </style> </head> <body> <ul id="nav">     <li class="compatibilities"><a title="compatibilities"><span class="img"></span><span>compatibilities</span></a></li>     <li class="deficiencies"><a title="deficiencies"><span class="img"></span><span>deficiencies</span></a></li>     <li class="products"><a title="products"><span class="img"></span><span>products</span></a></li>     <li class="contact"><a title="contact"><span class="img"></span><span>contact</span></a></li>     <li class="about"><a title="about"><span class="img"></span><span>about</span></a></li> </ul></body> </html> 

what want blue <a> elements flush against top of dark grey background. want smaller grey <span class="img"> have 10 pixel margin top of blue <a>.

but code above doesn't work way. margin of <span class="img"> pushing blue <a> down. why happen , how fix?

i'm viewing in google chrome.

that's how margin collapsing works.

you can "fix" adding padding:0.01px container element. padding small make visual difference, prevent margin collapsing.


Comments

Popular posts from this blog

How to remove text and logo OR add Overflow on Android ActionBar using AppCompat on API 8? -

html - How to style widget with post count different than without post count -

url rewriting - How to redirect a http POST with urlrewritefilter -