title: Match text height with image height in menu
body: <p>I have a menu, for which I put at the end 3 images, measuring 30x30 px each. After the images being inserted, it appeared a space between the bottom line of the menu and only the text. For the image there is no space between the bottom of the menu and the images. What I would like now to do, would be to have the text having the exact size (I managed to fix this space by increasing font size, but this is not a solution for me) as now and get rid of that space. Again, the space is only below the text and not the images. *Check with full-screen the menu.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#nav { 
      background-color: #e26a63;
      padding: 0;
      margin: 0;
      font-family: FONT;
      font-size: 20px;
  }
     
  #wrap {
      padding-left: 60px;
      height: 100px;
      width: 100%;
      margin: 0 auto;
      display: table-cell; 
      vertical-align: bottom;
  
  }
  #nav ul {
      list-style-type: none;
      padding: 0;
      margin: 0;
      position: relative;
      min-width: 245px; 
  }
  #nav ul li {
      display: inline-block;
  }
  #nav ul li:hover {
      background-color: #cb5f59;
  }
  
  #nav ul li:after {
    content: "";
    font-size: 0;
    display: block;
    height: 5px;
  
  }
  #nav ul li:hover:after {
    background: #9e4a45;
  }
  #nav ul ul li:hover:after {
    background: transparent;
  }
  #nav ul li a, visited {
      color: white;
      display: block;
      padding: 15px;
      text-decoration: none;
  }
  #nav ul li:hover ul {
      display: block;
  }
  #nav ul ul {
      display: none;
      position: absolute;
      background-color: #e26a63;
      border-top: 0;
      margin-top: 5px;
          z-index: 100;
  }
  #nav ul ul li {
      display: block;
  }
  #nav ul ul li a:hover {
      color: white;
  }
  #nav {
      display: table;
      width: 100%;
  }
  
  .alignright { float: right; }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="nav"&gt;
      &lt;div id="wrap"&gt;
          &lt;ul&gt;
          &lt;li&gt;&lt;a href="home.html"&gt;Home&lt;/a&gt;&lt;/li&gt;&lt;li&gt;
  
          &lt;a href="#"&gt;Study&lt;/a&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="Present.html"&gt;Present Simple&lt;/a&gt;&lt;/li&gt;&lt;li&gt; 
                  &lt;a href="Possessives.html"&gt;Possesives&lt;/a&gt;&lt;/li&gt;&lt;li&gt;  
                  &lt;a href="Articles.html"&gt;Articles&lt;/a&gt;&lt;/li&gt;&lt;li&gt; 
                  &lt;a href="Modal.html"&gt;Modal Verbs&lt;/a&gt;&lt;/li&gt;&lt;li&gt;   
                  &lt;a href="Prepositions.html"&gt;Prepositions&lt;/a&gt;&lt;/li&gt;&lt;li&gt;    
                  &lt;a href="Plural.html"&gt;Plural of nouns&lt;/a&gt;&lt;/li&gt;&lt;li&gt;    
                  &lt;a href="Countability.html"&gt;Countability&lt;/a&gt;&lt;/li&gt;           
              &lt;/ul&gt;
            &lt;/li&gt;&lt;li&gt;
          &lt;a href="#"&gt;Games&lt;/a&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Riddles&lt;/a&gt;&lt;/li&gt;&lt;li&gt; 
                  &lt;a href="#"&gt;Flip card game&lt;/a&gt;&lt;/li&gt;&lt;li&gt;  
                  &lt;a href="#"&gt;Spot the mistake&lt;/a&gt;&lt;/li&gt;&lt;li&gt; 
                  &lt;a href="#"&gt;Multiple choice&lt;/a&gt;&lt;/li&gt;                
              &lt;/ul&gt;
            &lt;/li&gt;&lt;li&gt;
          &lt;a href="oferta.html"&gt;Shop&lt;/a&gt;&lt;/li&gt;&lt;li&gt;
          &lt;a href="contact.html"&gt;Contact&lt;/a&gt;&lt;/li&gt;&lt;li&gt;
          &lt;a href="about.html"&gt;About Us&lt;/a&gt;&lt;/li&gt;
          &lt;li style="float:right"&gt;&lt;a&gt;&lt;img src="gmail.png" height="30px" width="30px"&gt;&lt;/a&gt;&lt;/li&gt; &lt;li style="float:right"&gt;&lt;a&gt;&lt;img src="twitter.png" height="30px" width="30px"&gt;&lt;/a&gt;&lt;/li&gt;&lt;li style="float:right"&gt;&lt;a&gt;&lt;img src="facebook.png" height="30px" width="30px"&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
  
      &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>