Taking up space after display none

Question

When I apply display: none; for #nav-icon element, it still takes up space. Here is my code:

HTML

<div id="nav">
  <a href="" id="nav-icon"> <img src="navigation.png" alt="nav-menu"</a>
  <ul>
    <li> <a href="#"> LINK </a> </li>
    <li> <a href="#"> LINK </a> </li>
    <li> <a href="#"> LINK </a> </li>
    <li class="navimage"> <a href="twitter.com"> <img src="twitter-icon.png" alt="twitter-icon" /> </a> </li>
    <li class="navimage"> <a href="facebook.com"> <img src="facebook-icon.png" alt="facebook-icon" /> </a> </li>
    </ul>
  </div>

CSS

#nav {
    border-bottom:1px solid #FFF;
    margin-bottom:20px;
    padding:0;
    text-align:center;
    max-width:95%;
    margin:0 auto;
}

#nav li {
    display:inline;
}

#nav a {
    display:inline-block;
    padding:15px;
    font-weight:bold;
    font-size:15px;
    margin:15px 0;
}

#nav-icon img {
    display:none;
}

.navimage {
    float:right;
    margin-top:-5px;
}

Any solution?

Answer 1

You have the img inside #nav-icon hidden. You don't have the actual <a> wrap hidden though. Since it's set to inline-block, it can display when there is nothing inside it. Change the display:none to be on the actual #nav-icon instead of #nav-icon img, and you'll be good.

You might run into issues of conflicting display rules though, because you are applying rules with different selectors on the same element. #nav a and #nav-icon are the same thing, but one might overrule the other. To make sure you have it selected correctly, the second should include all previous selectors, which would be #nav a#nav-icon.

Change:

#nav-icon img {
    display:none;
}

http://jsfiddle.net/C4YPR/

To:

#nav a#nav-icon {
    display:none;
}

http://jsfiddle.net/C4YPR/1/