关于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;
	box-sizing:border-box
}

来源：CSDN

作者：qaqLjj

链接：https://blog.csdn.net/qaqLjj/article/details/103846165