CSS 行高 line-height 解析

最新推荐文章于 2022-04-26 14:40:40 发布

懒牛不爱梳毛

最新推荐文章于 2022-04-26 14:40:40 发布

阅读量590

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/dikentoujing99/article/details/100766910

版权

前端专栏收录该内容

8 篇文章 1 订阅

订阅专栏

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

以上内容来自 MDN（不在此叙述line_height的单位等问题），从以上的内容我们可以了解到，line-height主要用于设置行盒的最小高度，看到这一些人可能会觉得行高就是元素的高度，如下图所示：

[外链图片转存失败(img-bIF5OpYC-1568260006789)(https://github.com/lanniu/picHub/blob/master/data/20190912095446.png?raw=true)]

但其实这种想法并不是完全正确的，首先我们要明确一点，line-height ！= height，line-height只是限制了height的最小值，而在我看来line-height和height的关系也就到这了，为什么这么说呢？我们看下面两个例子。

<html>
<head>
<style>
div{
	height: 100px;
	border: 1px dotted #000;
	line-height: 100px;
	background: rgba(0, 0, 0, 0.3);
}
</style>
</head>
<body>
<div>
<span>块格式化上下文（Block Formatting Context，BFC） 是Web页面的可视化CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。</span>
</div>
</body>
</html>

<html>
<head>
<style>
div{
    // height: 100px; 注释掉此行，让高度自适应
	border: 1px dotted #000;
	line-height: 100px;
	background: rgba(0, 0, 0, 0.3);
}
</style>
</head>
<body>
<div>
<span>块格式化上下文（Block Formatting Context，BFC） 是Web页面的可视化CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。</span>
</div>
</body>
</html>

上面两个例子的窗口宽度都不足以让文本在一行显示，唯一的不同就是是否显示的定义了div的height，当我们显示定义div的height并将line-height设置为等于height时，我们发现文本的内容跑到了div的外面，而当我们没有显示的定义div的height时，内容被包裹到div中。

通过以上的现象我们可以得知，line-height确实限制了height的最小值，但是当内容多于一行时，height并不会自动适应。

接下来我们仔细的分析一下为什么会出现超出div的情况，请看下图。

首先，我们需要知道的是font有四条线，分别是：

上线对应上图的 1 和 a
中线对应上图的 2 和 b
基线对应上图的 3 和 c
下线对应上图的 4 和 d

我们熟知的font-size就可以看成是上线到下线的距离。我们现在关注的line-height其实是两条基线之间的距离，而行距就是第一行的下线和第二行的上线之间的距离，我们稍微整理下，可以得到一个公式：

行距 + 字体大小 = 行高

我们再回到刚才的问题，为什么会出现内容超出div的情况，其实就是因为出现了多行，使得高度超出了div的height，但当div的高度为自适应时就不会出现这种情况。

相信一部分人和我一样，知道line-height属性是因为遇到了一个问题，“如何垂直居中”，这时候就会看到一条答案，“设置 line-height 等于 height”，然后一试，果然可以。但不知道大家有没有想过为什么。

其实原因很简单，当我们设置 line-height 等于 height 时，根据刚才的公式我们可以得到，行距 + 字体大小 = height ，并且由于上下的半行距相等，而文字被夹在上下的半行距之间，所以无论字体大小是多少都会让文字垂直居中。但这种方法不可取，因为如果出现换行或者需要垂直居中的不是文字，就会出现意料之外的情况。

懒牛不爱梳毛

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS 行高 line-height 解析

line-height CSS 属性用于设置多行元素的空间量，如多行文本的间距。对于块级元素，它指定元素行盒（line boxes）的最小高度。对于非替代的 inline 元素，它用于计算行盒（line box）的高度。以上内容来自 MDN（不在此叙述line_height的单位等问题），从以上的内容我们可以了解到，line-height主要用于设置行盒的最小高度，看到这一些人可能会觉得行高就是...
复制链接

扫一扫