Question

CSS 里的 height 属性与 line-height 属性有什么区别

Answer 1

height是元素自身的高度，line-height则是元素内部文字的行高，比如：
height:100px; line-height:20px; padding:0
表示具有这个样式的元素的高度为100像素，里面的文字行高为20像素（换句话说就是可以排5行文字），内边距为0（如果不为0则元素的高度会被撑大）。

补充说明一下：如果一个元素的height和line-height相同，意味着这行文字在元素中垂直居中（但仅限文字，且只能一行）。

Answer 2

块内布局规则

块内height为auto时，高度为块内行框累加高和其内普通流块高之和
块内height为非auto时，块高为 height 指定高度

块内行框布局（行内布局）规则

每一个行内元素会产生一个行内框；
行内框会在行框内横向排列；
'line-height' 特性值指定了每个行内非替换元素生成的行内框的 确切 高度；行内替换元素的高度由 'height' 特性值决定；
文字在行内框中垂直排列，上下空隙用半差异填补；如果字号大于行内框则文字从上下方向上溢出行内框，并可能渗入到其他行框内（行框是永远不会重叠的）；
'vertical-align' 特性值指定了每个行内框的垂直对齐方式；
行框的顶边界是这一系列垂直对齐的行内框最高的顶边框，底边界是最低的底边框。
行框的高度是顶边界到底边界的距离。
所以 line-height 是决定行框高度的因素之一
而 height 只是决定包含块高度

Answer 3

Vue实践-CSS样式position/display/float属性对比使用