title: Taking up space after display none
body: <p>When I apply <code>display: none;</code> for <code>#nav-icon</code> element, it still takes up space. Here is my code:</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="nav"&gt;
    &lt;a href="" id="nav-icon"&gt; &lt;img src="navigation.png" alt="nav-menu"&lt;/a&gt;
    &lt;ul&gt;
      &lt;li&gt; &lt;a href="#"&gt; LINK &lt;/a&gt; &lt;/li&gt;
      &lt;li&gt; &lt;a href="#"&gt; LINK &lt;/a&gt; &lt;/li&gt;
      &lt;li&gt; &lt;a href="#"&gt; LINK &lt;/a&gt; &lt;/li&gt;
      &lt;li class="navimage"&gt; &lt;a href="twitter.com"&gt; &lt;img src="twitter-icon.png" alt="twitter-icon" /&gt; &lt;/a&gt; &lt;/li&gt;
      &lt;li class="navimage"&gt; &lt;a href="facebook.com"&gt; &lt;img src="facebook-icon.png" alt="facebook-icon" /&gt; &lt;/a&gt; &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>#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;
  }
  </code></pre>
  
  <p>Any solution?</p>