css行高和盒子高区别

行高

什么是行高

在css中所有的行都有自己的行高。

.box1 {
    border: 1px solid black;
    width: 200px;
}

<div class="box1">我是文字</div>

被撑起来的高度就是行高

line-height属性

line-height: 60px;

80px就是行高

注意点：

1.行高和盒子的高度不是一个概念。盒子高度是整个标签的高度,如果设置了，就不会跟着行高变化，如果没有设置就会被撑大，两个行高80px的段落，此时盒子就变成了160px高

2.文字在行高中默认垂直居中。

3.在企业开发中，只要行高和盒子高度一样，就可以保证一行文字在盒子的高度中垂直居中（一行文字）。如果多行文字，可以使用内边距来让文字居中。 使用box-sizing属性挤压文字，文字就会居中。

.box1 {
    border: 1px solid black;
    height: 80px;
    width: 40px;
    line-height: 20px;
    box-sizing: border-box;
    padding-top: 20px;
    padding-bottom: 20px;
}

<div class="box1">我是文字</div>