在制作纵向导航条时发现作为项目符号的背景图像比字符的位置要高一些。例如：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>测试网页</title>
<style>
ul {
list-style: none;
}
ul li {
background-image: url(apple.png);
background-size: 32px 32px;
background-repeat: no-repeat;
padding-left: 40px;
margin: 10px auto;
}
ul li a {
font-size: 32px;
text-decoration: none;
}
</style>
</head>
<body>
<ul>
<li><a href="#">第一个项目</a></li>
<li><a href="#">第二个项目</a></li>
<li><a href="#">第三个项目</a></li>
</ul>
</body>
</html>
其中用到的图标文件是apple.png
在浏览器中显示的效果：
如果在列表项的样式里设置line-height为32px：
ul li {
line-height: 32px;
......
}
那么背景图像与字符基本上站在同一条水平线上：
虽然能够做到比较满意的效果，但还是想搞清楚line-height起到什么作用。
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
