CSS 关于line-height详细讲解

文章目录

• 前言
  • MDN对line-height定义
  • line-height单位
  • line-height的计算
• 实际开发案例：
  • 对于块盒
  • 对于行盒

前言

下面图片来自网络：

在这里插入图片描述

MDN对line-height定义

line-height CSS 属性用于设置多行元素的空间量，如多行文本的间距。对于块级元素，它指定元素行盒（line boxes）的最小高度。对于非替代的 inline 元素，它用于计算行盒（line box）的高度。

line-height单位

• 数字：该属性的应用值是这个无单位数字<数字>乘以该元素的字体大小
• 长度：指定<长度>用于计算 line box 的高度;如：px、em 等
• 百分比：计算值是给定的百分比值乘以元素计算出的字体大小

line-height的计算

line-height是参考font-size的值计算的，如下图为无单位赋值；另外百分比、px等类似。

font-size:12px;
line-height:1;
/* 此时line-height=1*font-size=12px */

其次当line-height的值等于font-size的值时，即此时行距为0，但实际显示效果如下。

HTML:

<div class="f1">
     <span class="p1">测试一下line-height属性</span>
</div>
<div class="f2">
     <span class="p2">测试一下line-height属性2.0</span>
</div>

CSS:

.p1 {
    line-height: 40px;
    outline: 1px solid #3d08fc;
    font-size: 40px;
}

.p2 {
    line-height: 40px;
    outline: 1px solid #07f02a;
    font-size: 40px;
}

.f1 {
    outline: 1px solid red;
}

.f2 {
    outline: 1px solid rgb(204, 255, 0);
}

效果：

在这里插入图片描述

实际开发案例：

个人认为在实际开发中，line-height主要是对文字内容进行css样式调整，这里我们探讨一下其对块盒和行盒的区别。

对于块盒

该属性是块盒content区域中行盒的最小高度，不涉及padding、border区域，在实际开发，通常用来使文字内容居中显示；且在块盒没有设置高度的前提下，则块盒高度默认等于line-height的值。

在这里插入图片描述

第一张图片：父元素中设置的line-height值等于其自身盒子（border+padding+content）高度，导致其子元素中的文字内容下移。

在这里插入图片描述

第二张图片：父元素中的line-height值设置等于其自身盒子content区的高度，则其子元素继承后，其文字内容能在父元素中居中显示。

对于行盒

该属性的值就是该行盒的高度,但是用 Computed在控制台得不到其高度（元素为inline，则不显示宽高）；

CSS:

span{
  line-height: 20px;
  outline: 1px solid #3d08fc;
  font-size: 20px;
}
div{
  outline: 1px solid red;
}

HTML:

<div>
    <span>测试一下line-height属性</span>
</div>

效果：

在这里插入图片描述