line-height的一点见识

今天在项目中，分页问题，数字与上一页、下一页不对齐，上一页与上边框的距离在各个浏览器下面表现不一样

body{font:12px/1 Thoma,Helvetical,Arial,\5b8b\4f53}

.page a{border:#cccccc 1px solid;background-color:#ffffff;text-decoration:none;float:left;}

<a href="#">上一页</a>

在firefox下面：上一页离上边框的距离是2px，下面占1px边框的位置，与下边框重叠了

在IE8下面：上一页离上边框重叠，占1px，下面离下边框1px间距

不能让上一页垂直居中对齐，设置成ling-height:18px，firefox下面能对齐，IE8死活不对齐

后来研究line-height:设置行间的距离(块级元素设置成line-height才有效)

line-height 与 font-size 的计算值之差（在 CSS 中成为“行间距”）分为两半，分别加到一个文本行内容的顶部和底部。可以包含这些内容的最小框就是行框。