在菜单中匹配文本高度与图像高度

Question

我有一个菜单，我最后放了3张图片，每张图片尺寸为30x30像素。插入图像后，它在菜单的底线和仅文本之间出现了一个空格。对于图像，菜单底部和图像之间没有空格。我现在要做的是，让文本具有确切的大小（我设法通过增加字体大小来修复此空间，但这不是我的解决方案），就像现在一样，摆脱那个空间。同样，空间仅在文本下方而不是图像。 *全屏查看菜单。

>>> dbf = pysal.open("/path/to/shapefile.dbf", "r")
>>> print dbf.header
[column names, ... ]
>>> FIPS = dbf.by_col("name_of_fips_code_column")
>>> FIPS = map(str, FIPS) #make sure we're writing strings
>>> out = open('fips.txt','w')
>>> out.write('\n'.join(FIPS))
>>> out.close()

#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; }

Answer 1

最简单的方法是为文本设置与图像相同的高度

#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><a href="home.html">Home</a></li><li>

        <a href="#">Study</a>
            <ul>
                <li><a href="Present.html">Present Simple</a></li><li> 
                <a href="Possessives.html">Possesives</a></li><li>  
                <a href="Articles.html">Articles</a></li><li> 
                <a href="Modal.html">Modal Verbs</a></li><li>   
                <a href="Prepositions.html">Prepositions</a></li><li>    
                <a href="Plural.html">Plural of nouns</a></li><li>    
                <a href="Countability.html">Countability</a></li>           
            </ul>
          </li><li>
        <a href="#">Games</a>
            <ul>
                <li><a href="#">Riddles</a></li><li> 
                <a href="#">Flip card game</a></li><li>  
                <a href="#">Spot the mistake</a></li><li> 
                <a href="#">Multiple choice</a></li>                
            </ul>
          </li><li>
        <a href="oferta.html">Shop</a></li><li>
        <a href="contact.html">Contact</a></li><li>
        <a href="about.html">About Us</a></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>