行高 line-height

行高与盒子的高度是不同的

如果盒子的高度没有设置，默认行高是行内元素撑起来的高度。

如果盒子的高度已经设置好了，盒子高度不会随着行高变化而变化

当行高与盒子高度相同时，对于单行内容可以实现垂直居中

div {
            border: solid;
            width: 100px;
            height: 100px;
            background-color: pink;
            /* line-height: 30px; */
            /* 默认字体16px 22 22 */
            line-height: 100px;
        }

当行高比高度小，文本内容会偏上，

div {
            border: solid;
            width: 100px;
            height: 100px;
            background-color: pink;
            /* line-height: 30px; */
            /* 默认字体16px 22 22 */
            line-height: 50px;
        }

行高比高度大，文本内容会偏下

div {
            border: solid;
            width: 100px;
            height: 100px;
            background-color: pink;
            /* line-height: 30px; */
            /* 默认字体16px 22 22 */
            line-height: 150px;
        }

行高的继承性

行高可以跟单位，也可以不跟单位

body {
    font: 12px/1.5 '微软雅黑'
}

子元素没有设置行高，会继承父元素的1.5

子元素行高：是指子元素字体大小 * 1.5

这样写的优势是方便子元素可以根据字体大小来调整行高