line-height 与 border

如果为一个div设置border，同时又试图使用line-height让元素内的字体居中，会如下图所示，字体会稍稍偏下。

解决方法：类似border 0.5px的解决方案，使用::after的方式重新画一个出来。

原理：line-height用来定义 行高 ，而使用将line-height的属性赋值与height相同的值，本质上是使文本组成的行框的行高等于容器的高度，文本在选框中居中。若设置border并且是box-sizing:border-box;的状态,则line-height是不等于height的，所以文本稍稍偏下。
由此得到另一种解决方案 box-sizing:content-box;

另外：对于line-height有一个经典问题：1.5与150%的区别？
ling-height:1.5是根据子元素的font-size来计算并设置子元素的line-height
ling-height:150%是根据父元素的font-size来计算并设置子元素的line-height