理解CSS行高line-height

By 刘志军, 2021-06-01, 分类: css

css, line-height

微信截图_20210523171829.png

先看上面这张图

我记得刚学英语的时候,英语作业本都是这种每行有4条线的格式,不过那时候老师并没有讲过这4条线代表什么。现在学CSS时候知道他们叫做顶线,中线,基线,底线。

另外这张图里有行高,行距,半行距,字号(font-size)等概念。你最熟悉的莫过于font-size了,就是字的大小。

基线(base line)一般是英文字母“x”的下端沿

微信截图_20210523173412.png

行高(line-height) 属性用于设置文本行之间的间距,行高越大,行与行之间的垂直间距就越大。不仅如此,行高也可以用来实现文本垂直居中的效果

我们知道对于非替换的内联元素,例如span标签是没法直接设置高度和宽度以及上下外边距这些属性的,怎样让他们也有高度呢? 答案是给他设置行高。

来看个例子

.main{
    background-color: #ccc;
    max-width: 1200px;
    margin: 100px auto;
}

<div class="main">
    <span>Python之禅</span>
</div>

父元素 div 在没有指定高度时,它的实际高度取决于它的子元素高度。所以在这里div的高度其实就是差不多就是子元素字体大小(行内框高度)。

微信截图_20210601100312.png

span {
    line-height:100px;
}

现在给span设置行高,行内框的高度就变高了,与此同时父元素div的高度跟着变高,而且你会发现,行单文本在设置了行高后,文本在容器中是垂直居中的。(思考下为什么会居中?)

微信截图_20210601100438.png

行距

行高数值上等于font-size与行距之和。行距指一行底线到下一行顶线的垂直距离。行距被 font-size 分隔成上下两个等分的半行距。所以现在明白设置行高后为什么单行文本会自动居中了吧,因为文本的上面和下面是两个高度相等的半行距,这也是单行文本居中常用的方式(如果容器设置了height属性,只需要将元素line-height值与height一样就可以居中)

行高(line-height) 与 font-size 的关系

font-size=line-height 时,行距为0。上下两行文字之间几乎没有间隔。

<div class="box">
    这是一段长的文字,这是一段长的文字,这是一段长的文字
</div>
.box {
    font-size: 16px;
    line-height: 16px;
}

微信截图_20210523230453.png

line-height < font-size 时,行距就是负数,这时候,两行文字会有重叠。 注意 line-height 不可为负数。

line-height: 1px;

微信截图_20210523230813.png

line-height > font-size 时,行距就大于0了,两行文本之间有了空白。一般我们都会将line-height的值设置为大于font-size,文字才有阅读体验效果。 实践中,line-height 通常设置为无单位的数值,例如 1.5, 1.5 其实就是font-size的1.5倍,16px*1.5 = 24px。 这时候,改变font-size 的值, line-height的实际值也会跟着缩放。

line-height: 24px;

微信截图_20210523231055.png

行高(line-height)的5种取值

示例 说明
normal normal 默认值,约为1.2,取决于元素的 font-family
number 1.5 无单位数值,相当于倍数,值是当前数字乘以该元素的font-size。这是设置行高的推荐方案。
length 16px、1.2em 有单位的数值,固定的行高
% 50% 基于当前字体尺寸的百分比
inherit 规定应该从父元素继承 line-height 属性的值。

行高(line-height)是怎么继承的?

line-height 是一个可以被子元素继承的属性,使用无单位的数值时,在每个继承子元素上会重新算它的计算值, 例如:

body {
    line-height: 1.2
}

.div1 {
    font-size:2em
}

默认1em 是16px,div1 的line-height 是 2em * 1.2 * 16px = 38.4px。

body {
    line-height: 1.2em
}

而使用带单位(em,px,rem)的值时,1.2em*16px = 19.2px, 后代元素直接继承的是它的计算值,不管子元素的font-size是多少,它的行高都是 19.2px。可能造成文字重叠的意外结果。

深入理解行高(line-height)

为了更深入理解行高,有必要明白CSS中4种类型的盒子

<p>hello world <em>css</em> is amazing</p>

containing box :就是最外层的容器盒子

微信截图_20210602074227.png

inline box:可以是一个由行内元素包裹的盒子,也可以是一个纯文字的匿名盒子。 下面hello world 就是一个匿名的 inline box。 inline box 高度是由行高撑起的。

inline-box.png

line box:包裹 inline box 的一个盒子,一个或多个 line box 堆叠撑起一个 HTML 元素。 libe box 的高度取决于最高的那个 inline box 的高度。

linebox

content area:是围绕着文字的一种看不见的盒子,对于非替换元素来说,content area 的高度由 font-size 以及字体本身决定;对于替换元素来说,由元素自有宽高决定。

微信截图_20210601183031.png

参考阅读:

1、https://www.cnblogs.com/rainman/archive/2011/08/05/2128068.html
2、https://www.cnblogs.com/dolphinX/p/3236686.html
3、https://blog.csdn.net/a2013126370/article/details/82786681
4、https://www.cnblogs.com/fengzheng126/archive/2012/05/18/2507632.html
5、https://www.slideshare.net/daemao
6、https://segmentfault.com/a/1190000017512478


有问题可以扫描二维码和我交流

关注公众号「Python之禅」,回复「1024」免费获取Python资源

python之禅

猜你喜欢

2019-05-08
CSS块级元素与行内元素
2020-04-15
重学前端:相对定位VS绝对定位VS固定定位
2021-05-26
理解 focus-within 伪类
2021-05-20
CSS元素遮挡问题与z-index属性
2021-05-20
CSS 媒体查询
2021-06-12
理解border-box