Question

关于div内字符上下之间间距的问题（CSS）

<div class="r2"> <ul> <li><a class="home" href="#">首页<br/><span>HOME</span></a></li> <li><a class="home1" href="#">个人风采<br/><span>CHARISMA</span></a></li> <li><a class="home" href="#">做了点事<br/><span>DEED</span></a></li> <li><a class="home" href="#">随笔<br/><span>ESSAY</span></a></li> <li><a class="home" href="#">视频<br/><span>VIDEO</span></a></li> <li><a class="home" href="#">留言板<br/><span>MESSAGE</span></a></li> </ul> </div>
以上相关html代码。
.r2 ul li{ display:inline-block; width:100px; height:84px; font-size:24px; border-left: #c8c8c8 1px solid; border-collapse: collapse; font-family: "黑体"; text-align: center;}

a.home:hover{ display: block; width:100px; height:84px; background-color:#15126F; color: #FFFFFF; }a.home1{ display: block; width:100px; height:84px; background-color:#15126F; color: #FFFFFF;}
以上是我觉得估计出了问题的代码，毕竟其他的东西影响都不大了。
我希望可以有如下图的效果，主要是文字的上下间距实在调整不来，求各路高手支招，在线等。

Answer 1

.r2 ul li span{ display:block; margin-top:10px;}这样子试试看！

Answer 2

给行高：line-heighe: 30px;或者 span 给上内边距或外边距

追问

首先谢谢你的答案，不过行高在这里用着效果实在不明显，还是能看得出来明显的间距。至于span的内外边距，另一位也提出来了。方向是对的，但是实际你这里还差了display的属性，所以我选那边为满意答案。再次谢谢你的热心帮助。