关于height与line-height

平时我经常使用如下代码来使文本在垂直方向居中对齐：

.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
}

height可以省略吗？
很多次，在单行文本的情况下，我只用line-height，省略了height。但是，最近项目中出现了一些bug，具体来讲，是在使用element个别组件的时候，如el-autocomplete，浮动布局出现问题，当加上height后问题解决了。

line-height是如何继承？
这是个有趣的问题，line-height 属性为数值(eg:1.5,2)时，line-height 会被子元素继承。
当其为百分比值或长度(eg:1.5em,20px)时则不会被继承。

line-height 的默认值是多少？
主要和字体有关，也极轻微的受到浏览器的影响（很小，0.01级别）。