Match text height with image height in menu - html

Question

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.
#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; }
<div id="nav">
<div id="wrap">
<ul>
<li>Home</li><li>
Study
<ul>
<li>Present Simple</li><li>
Possesives</li><li>
Articles</li><li>
Modal Verbs</li><li>
Prepositions</li><li>
Plural of nouns</li><li>
Countability</li>
</ul>
</li><li>
Games
<ul>
<li>Riddles</li><li>
Flip card game</li><li>
Spot the mistake</li><li>
Multiple choice</li>
</ul>
</li><li>
Shop</li><li>
Contact</li><li>
About Us</li>
<li style="float:right"><a><img src="gmail.png" height="30px" width="30px"></a></li> <li style="float:right"><a><img src="twitter.png" height="30px" width="30px"></a></li><li style="float:right"><a><img src="facebook.png" height="30px" width="30px"></a></li>
</ul>
</div>
</div>

Answer 1

The simplest would be to set the same height to your texts as you have on your images
#nav ul li a, visited {
color: white;
display: block;
padding: 15px;
height: 30px; /* added */
text-decoration: none;
}
Stack snippet
#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;
height: 30px; /* added */
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; }
<div id="nav">
<div id="wrap">
<ul>
<li>Home</li><li>
Study
<ul>
<li>Present Simple</li><li>
Possesives</li><li>
Articles</li><li>
Modal Verbs</li><li>
Prepositions</li><li>
Plural of nouns</li><li>
Countability</li>
</ul>
</li><li>
Games
<ul>
<li>Riddles</li><li>
Flip card game</li><li>
Spot the mistake</li><li>
Multiple choice</li>
</ul>
</li><li>
Shop</li><li>
Contact</li><li>
About Us</li>
<li style="float:right"><a><img src="gmail.png" height="30px" width="30px"></a></li> <li style="float:right"><a><img src="twitter.png" height="30px" width="30px"></a></li><li style="float:right"><a><img src="facebook.png" height="30px" width="30px"></a></li>
</ul>
</div>
</div>