lineheight的一点见识

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

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 中成为“行间距”)分为两半,分别加到一个文本行内容的顶部和底部。可以包含这些内容的最小框就是行框。

原文地址:https://www.cnblogs.com/xiaohui108/p/2147162.html