line-height行高

line-height行高

• line-height的定义
• line-height的单位
• line-height的另一种用法(文字垂直方向居中)

line-height的定义

line-height属性用于设置行间的距离（行高），可以控制文本行与行之间的距离。
下图中的1，2，3处都是行高。1是行高的定义。2和3方便行高的测量

line-height的单位

• line-heigh属性的单位可以是以px为单位的数值，如：line-height: 30px

    <style>
        div {
            width: 300px;
            height: 300px;
            line-height: 30px;
        }
    </style>
    <div>
        君不见黄河之水天上来，奔流到海不复回。君不见高堂明镜悲白发，朝如青丝暮成雪。人生得意须尽欢，莫使金樽空对月。天生我材必有用，千金散尽还复来。烹羊宰牛且为乐，会须一饮三百杯
    </div>

• line-heigh属性也可以是没有单位的数值，表示字号的倍数这是最推荐的写法

下面的代码中line-height的值就是(14*1.5)px,当font-size属性的值变的时候line-height的值也会跟着变

    <style>
        div {
            width: 300px;
            height: 300px;
            font-size: 14px;
            line-height: 1.5;
        }
    </style>
    <div>
        君不见黄河之水天上来，奔流到海不复回。君不见高堂明镜悲白发，朝如青丝暮成雪。人生得意须尽欢，莫使金樽空对月。天生我材必有用，千金散尽还复来。烹羊宰牛且为乐，会须一饮三百杯
    </div>

line-height的另一种用法(文字垂直方向居中)

由于文字到它的行高的上下边缘距离都是相等的，所以我们可以在一个块级元素中设置行高等于容器的高度，实现文字的垂直居中。下面的代码中div中文字的行高和div的高度一样，就实现了文字在垂直方向的居中

    <style>
        div {
            width: 200px;
            height: 100px;
            line-height: 100px;
            border: 1px solid green;
        }
    </style>
    <div>
        我是文字
    </div>