炫意html5
最早CSS3和HTML5移动技术网站之一

对css的line-height的属性、行距、x-height的深入理解

前言

行高,顾名思义是一行文字的高度,而从规范上来说则是两行文字基线之间的距离。行高是作用在每一个行框盒子(line-box)上的,而行框盒子则是由内联盒子组成,因此,行高与内联元素可以说是非常紧密,行高直接决定了内联元素的高度(注意:这里的内联元素不包括替换元素);对于块级元素和替换元素,行高是无法决定最终高度的,只能决定行框盒子的最小高度。

x、x-height以及ex

字母x在css里面扮演着一个很重要的角色,因为字母x的下边缘就是基线所在的位置。而x-height指的就是字母x的高度,ex是一个尺寸单位,其大小是相对字母x的来计算的,即1ex就表示1个字母x的高度。如下图所示:

我们在平时的开发中很少用到ex,因为ex是个相对单位。对于相对的东西,我们总是感觉很难控制,但这并不表明ex就一点用处都没有。我们可以利用ex就是一个x-height的特性来实现图标与文字的垂直居中,这样如论字体大小如何变化,都不会影响垂直居中的效果。代码如下:


.icon-arrow {
    display: inline-block;
    width: 20px;
    height: 1ex;
    background: url(down.png) no-repeat center;
    background-size: contain;
}
<div>
    <span>我是一段文本</span>
    <i class="icon-arrow"></i>
</div>

效果如下:

line-height的属性值

  • normal
  • 数字
  • 长度
  • 百分比

normal

normal为line-height的默认值,但并不是一个固定的值,而是会受font-family的影响,对于“微软雅黑”,其值为1.32;而对于“宋体”,其值为1.141。由于不同操作系统,不同浏览器所使用的字体不一样,所以最终line-height的具体值会不一样,因此这个属性作用不大。

数字

我们可以设置line-height: 1.5。其意思是说line-height的最终大小为 1.5* font-size,一般建议使用该值来设置line-height。

长度

长度用的最多的就是px与em,em跟数字一样,都是相对于font-size来计算的。

百分比

百分比也是相对于font-size来计算的。

相信细心的小伙伴已经发现了,数字,em以及百分比都是相对于font-size来计算的,既然这样,为什么还要多此一举设置另外两个属性呢。原因就在于它们的继承方式是不一样的。对于数字,父元素设置了1.5,则子元素也是会继承1.5。但如果父元素设置的是1.5em,假设父元素font-size是20px,则父元素line-height是30px,同时子元素的line-height也是30px,也就是说子元素继承的是父元素计算后的line-height值。因此,这也是为什么上面推荐使用数字而不是em或百分比的原因了。

行距与半行距

很多开发人员开还原设计图的时候,往往没有考虑到行距的影响,因此开发出来的页面很多时候都与设计图不符合,总会差那么几个像素。那么什么是行距呢,我们可以想象一下在文字排版的时候,如果行与行之间的间距为0,则文字是会紧紧贴在一起的,因此,行距就是用来协助排版的。行距的计算为:line-height – em-box,em-box指的是1em的大小,因此行距可以表示为:line-height – font-size,假设line-height为1.5,font-size为20,则行距为:
1.5*20 – 20 = 10,则最终行距为10,而这个行距会平均作用于文字的上边和下边。但em-box我们是无法感知这个盒子在哪的,而内容区域我们则可以理解为我们选中文字后的背景色所在区域,而当字体是宋体的时候,内容区域和em-box是等高的,因此我们可以利用此揪出ex-box的藏身之处。如下图所示:

正是因为行距的存在,我们给元素设置margin值时,要减去相应的半行距值,这样才能比较精确地还原设计图。

line-height的应用

大部分时候,我们设置line-height,都是为了垂直居中对齐。但这里的居中,只能说是近似居中,从上面的图可以看出:行距是上下均分的,但是内容区域不是,一般来说,文字都是偏下的。我们平时设置字体一般都是12-20像素,这么小的像素值,给出line-height值后,由于上下相差不大,因此感觉上是垂直居中的。line-height除了可以作为单行文本的居中对齐外,多行文本也是可以的,代码如下:


.box {
    width: 400px;
    line-height: 400px;
    padding: 0 10px;
    border: 1px solid #ccc;

}
.text {
    display: inline-block;
    line-height: 1.3;
    font-size: 14px;
    vertical-align: middle;
}

<p class="box">
    <span class="text">这是一段很长很长的文字,这是一段很长很长的文字,这是一段很长很长的文字,这是一段很长很长的文字,这是一段很长很长的文字</span>
</p>

效果如下:

前面的文章有说过,每一个行框盒子前面都有一个看不见的,规范称之为“strut”的东西。我们给.box设置了line-height为400px,则这个“strut”的line-height也会继承为400px。然后我们给.text设置inline-block,这样我们就可以重置.box设置的line-height,又因为ineline-block保持了内联特性,因此我们可以设置vertical-align以及产生“strut”,从而实现近似垂直居中对齐。

总结

  • 介绍了字母x在css中的地位以及ex的应用
  • line-height各种不同的属性值以及数字、em和百分比的不同之处
  • 行距在line-height的作用
  • line-height实现单行垂直居中和多行垂直居中

参考:
《css世界》
https://developer.mozilla.org…

炫意HTML5 » 对css的line-height的属性、行距、x-height的深入理解

CSS3教程HTML5教程