关于height与line-height的小Tips
关于height与line-height的小Tips 平时我经常使用如下代码来使文本在垂直方向居中对齐： .demo { font-size : 18px ; height : 30px ; line-height : 30px ; } 这就是常见的文本垂直居中的方式。但是在最近，我发现了一个问题，line-height到底指定的是元素那一部分的高度呢？ 比如，这段代码中div的高度是多少呢？ < div > test </ div > div { line-height : 400px ; box-sizing : border-box ; border : 1px solid #ccc ; } 它的高度其实是402px，甚至去掉 box-sizing:border-box 也是402px，也就是说div的高度与div的盒模型没有关系。 这里的原因其实也很简单，div是被文字撑开的，文字是400px高，加上上下border就是402px了。 所以以后再写文字垂直居中时，在有上下边框的情况下，并且同时修改了 box-sizing 为 border-box 时，line-height要减去边框的宽度。如下： .demo { font-size : 14px ; border : 1px solid #ccc ; height : 30px ; line-height : 28px ;