CSS魔法堂：深入理解line-height和vertical-align

avwu 发布于2019-08-30 12:52 / 1516人阅读

摘要：下的属性值详解以下内容均在中测试默认对齐方式这里作为参考系，而它的就是所要对齐的了。没有任何变化。那改变又如何呢为了让的清晰可见，特意添加一个的包裹着。

前言

一直听说line-height是指两行文本的基线间的距离，然后又说行高等于行距，最近还听说有个叫行间距的家伙，@张鑫旭还说line-height和vertical-align基情四射，贵圈真乱啊。。。。。。于是通过本篇来一探究竟:)

line-height到底有多height？ 行距、行间距傻傻分不清

首先看看“有道词典”的解析!

Leading = Line Space + Font Size(即是 行距 = 行间距 + 字体大小)
Leading: 指相邻文本行间上一个文本行基线和下一文本行基线间的距离。
Line Space: 指相邻文本行间上一个文本行下行线(ascent)和下一文本行上行线(descent)间的距离。

而在一些面向普通消费者的软件中，Leading往往是指Line Space。Leading
在CSS当中，Leading就是指Line Space。而CSS属性line-height则是用于设置真实的Leading。参考

Still for each glyph, determine the leading L to add, where L = "line-height" - AD

AD是指字形ascent和descent间的距离，即是font-size。
这里为更清晰地叙说，我将以广义Leading指代行间距，而狭义Leading则指代行距。
从W3C Rec中看出，line-height就是狭义Leading，而line-height的字面意思即为“行高”，推导结果CSS中行高即是行距。
这里我们了解到行高，行距和行间距的区别了。那接下来要介绍line-height的一个重要特性——垂直居中性。

line-height的垂直居中性

通过L = "line-height" - AD我们知道line-height=行间距+字形大小，字形大小我们可以通过font-size来设置，而line-height就更不用说了，而家问题是行间距所占的空间是怎样分配的呢？
方案1:不是说行间距就是上一行的descent到下一行的ascent间的距离吗？那直接分配到A位置就好了。

方案2:如果方案1的分配方案合理，那么分配到B位置就也是OK的。

方案3:一边倒的分配方案太不美观了吧！不如将行间距对半开，然后分别分配到上下两端不就OK了吗！

CSS采用的就是方案3。这是引用了Half-leading的概念，Half-leading = Leading/2.

Half the leading is called the half-leading. User agents center glyphs vertically in an inline box, which adds half-leading on the top and bottom. For example, if a piece of text is "12pt" high and the line-height value is "14pt", 2pt of extra space should be added: 1pt above and 1pt below the text (this applies to empty boxes as well, as if the empty box contained zero-height text).参考

在深入垂直居中性之前，我们先看一个容易引起误解的示例。(其实是我自己误解而已:()

center glyphs vertically in an inline box.

不是说好了会垂直居中吗？你看字母x明明就在div#container中线的下方呢！
我们用空格符代替文字就可以看清楚了。

“垂直居中”是指字形所在的盒子的垂直中线与line-height所占据的盒子的垂直中线重合，不是指字形的mean line和line-height所占据的盒子的垂直中线重合。
从L = "line-height" - AD可以知道行间距可能会负数，那么垂直居中性还有效吗？
答案是肯定的，L为负数时，Half-leading自然也是负数，只是上下两端从增加空间变为减少等量空间而已。不信你看

line-height属性

"line-height"
Value: normal | | | | inherit
Initial: normal
Applies to: all elements
Inherited: yes
Percentages: refer to the font size of the element itself
Media: visual
Computed value: for and the absolute value; otherwise as specified

normal

Tells user agents to set the used value to a "reasonable" value based on the font of the element. The value has the same meaning as . We recommend a used value for "normal" between 1.0 to 1.2. The computed value is "normal".

normal其实就是一个值，不过实际值则由浏览器决定，实际值一般在1.0~1.2之间（含两端）浮动。但实际真的是这样吗？


line-height-x-L
line-height-x-L
line-height-x-L

Chrome43的结果

14/10 = 1.4
45/40 = 1.125
92/80 = 1.15
average: 1.225 约为1.2

Firefox44.0.2

13/10 = 1.3
46/40 = 1.15
92/80 = 1.15
average: 1.2

IE9

11/10 = 1.1
46/40 = 1.15
92/80 = 1.15
average: 1.13333 约为1.1

通过小数据统计得出normal值的规律：

不同浏览器的normal值不相同;

同一个浏览器下，font-size值不同，normal值也会有变化;

同一浏览器下，font-size值相同，font-family值不同，normal值也会有变化;

normal的平均值确实是在1.0~1.2之间（含两端），但具体到特定浏览器、font-family和font-size时，normal的实际值可能会大于1.2。

The specified length is used in the calculation of the line box height. Negative values are illegal.

设置固定值，单位可以是px、pt。好处是简单——设置是什么，line-height的实际高度就是什么。坏处是子元素默认情况下会继承父容器的line-height属性，若子元素的font-size大于父容器的font-size属性值，那么子元素的文本行会十分密集，降低可阅读性。所以我们一般采用相对font-size实际大小来设置line-height值的方式，如默认normal方式。

The computed value of the property is this percentage multiplied by the element"s computed font size. Negative values are illegal.

既然采用副作用那么大，那采用这个相对值就万事大吉了吧！非也，首先我们要弄清楚这个的参考系是啥，另外还要明白子元素的line-height到底继承的了哪个值，是值还是父容器实际的line-height值。

的参考系的确是font-size；

子元素继承的是父容器实际的line-height值。也就是说父容器设置为font-size:20px;line-height:200%;，那么子元素继承来的line-height值为40px，而不是200%。因此又回到方式的问题上了。

The used value of the property is this number multiplied by the element"s font size. Negative values are illegal. The computed value is the same as the specified value.

和方式一样，以font-size作为参考系，以相对值的方式设置line-height。唯一的不同就是子元素继承的是父容器的值，参考系自动变更为子元素的font-size。
其实line-height:1.2em;和line-height:1.2;是等价的。若想将参考系改为根元素的font-size，则需要采用CSS3新增的line-height:1.2rem单位了。
根据WCAG2.0(万维网内容可存取性指南)规定“段落中的行距至少要1.5倍”，那么是否在body那设置一个就一劳永逸呢？请看

CSS魔法堂：深入理解line-height和vertical-align

In my dual profession as an educator and health care provider, I have worked with numerous children infected with the virus that causes AIDS. The relationships that I have had with these special kids have been gifts in my life. They have taught me so many things, but I have especially learned that great courage can be found in the smallest of packages. Let me tell you about Tyler.

看对于h1标题栏而言，行距太多了。于是得出如下配置：

body{line-height:1.5;}
h1,h2,h3,h4,h5,h6{line-height:1.2;}

vertical-align到底如何对齐呢？

下面我们稍微将line-height垂直居中特性中Leading为负数的示例代码修改一下,将font-size:90px;line-height:10px;迁移到子元素中.

不是说垂直居中吗？这里就涉及到一个相对复杂的CSS垂直对齐规则——vertical-align。
注意：前方高能，需要IFC、line box作为前提知识。（可参考CSS魔法堂：重新认识Box Model、IFC、BFC和Collapsing margins）

vertical-algin属性

"vertical-align"
   Value:      baseline | sub | super | top | text-top | middle | bottom | text-bottom |  |  | inherit
   Initial:      baseline
   Applies to:      inline-level and "table-cell" elements
   Inherited:      no
   Percentages:      refer to the "line-height" of the element itself
   Media:      visual
   Computed value:      for  and  the absolute length, otherwise as specified

:设置相对于baseline的距离，正数表示位于baseline的上方，负数表示位于baseline的下方;
:设置以line-height为参考系，相对于baseline的距离，正数表示位于baseline的上方，负数表示位于baseline的下方;
baseline:默认值。元素的基线与父元素的基线对齐；
top:把元素line box上边框对齐父元素的line box上边框；
text-top:把元素line box上边框对齐父元素的ascent(即content top edge)；
super:升高元素的基线到父元素合适的上标位置；
middle:把元素line box中垂点与父元素基线 + x-height/2的高度对齐;
sub:降低元素的基线到父元素合适的下标位置；
text-bottom:把元素line box下边框对齐父元素的descent(即content bottom edge)；
bottom:把元素line box下边框对齐父元素的line box下边框；
inherit:继承父元素的对齐方式。
怎么这么多规则要记啊？我记性不好难道到时还要挨个查吗？其实归纳一下就OK了！

对齐操作必定涉及操作元素和参考系元素，而vertical-align的值全是指参考系元素的位置，而操作元素则以baseline或linebox上中下作对齐；

默认对齐方式为baseline，数量值均是相对于baseline而言。

vertical-align仅对inline-level和table-cell元素有效

注意：vertical-align仅对inline-level和table-cell元素有效，下面示例无效是正常不过的。


I"m former
I"m latter

IE9+下的vertical-align属性值详解(以下内容均在Chrome43中测试)

1.默认对齐方式——baseline


  line-height x vertical-align
  x for reference frame

这里x for reference frame作为参考系，而它的baseline就是span#obj所要对齐的baseline了。
那么在baseline的基础上的设置和


  line-height x vertical-align
  x for reference frame


  line-height x vertical-align
  x for reference frame


  line-height x vertical-align
  x for reference frame


  line-height x vertical-align
  x for reference frame

2.top——把元素line box上边框对齐父元素的line box上边框
我们将上面的示例稍微改一下


  line-height x vertical-align
  x for reference frame

确实不同了，但这无法证明是元素的line box上边框对齐父元素的line box上边框哦。那么我们改改代码看看

  
  
    
      line-height x vertical-align
      x for reference frame

通过line-height:1使line box与content box/area的高度一致，虽然span#parent和span#obj的上边框对齐，但还不能说明什么。

  
  
    
      line-height x vertical-align
      x for reference frame

没有任何变化。那改变line-height又如何呢？

  
  
    
      
      line-height x vertical-align
      
      x for reference frame

为了让span#obj的Half-leading清晰可见，特意添加一个display:inline-block的inline box包裹着span#obj。而span#parent也增大了Half-leading的高度。现在可以我们清晰看到确实是span#obj的line box的上边框对齐父元素的line box上边框。（同理证明了vertical-align:bottom是把元素line box下边框对齐父元素的line box下边框；）
注意：chrome下若外层div不添加font-size:14px;line-height:1;属性，将导致span#parent上有条空白间隙

原因十分简单，那是因为span#parent的对齐方式是baseline，参考系是div的baseline，而div的line-height为normal，有空白间隙就是当然的事了。通过JS就可以看清楚了。

var div = document.getElementsByTagName("div")[0]
console.log(div.childNodes[0].nodeType) // 显示3，就是TextNode

其实除了在div上设置line-height:1之外，我们还可以在span#parent上设置vertical-align:top来解决。

  
  
    
      line-height x vertical-align
      x for reference frame

3.text-top——把元素的line box上边框对齐父元素的ascent(即content top edge)

  
   
      *
      x for reference frame

  
   
      
      *******
      
      x for reference frame

4.middle——把元素line box中垂点与父元素基线 + x-height/2的高度对齐

  
   
    
      *******x for reference frame

注意
当元素的display:inline-block/inline-table等对应的是atomic inline-level box时，其line box高度为margin box的高度。若元素对应的是inline box，则其最小高度为line-height，最大则由子盒子决定。

IE5.5~8下vertical-align属性值详解

由于我工作中没有适配IE8等历史浏览器的需求，因此详细内容请参考@张鑫旭的CSS vertical-align的深入理解(二)之text-top篇
简单来说IE5.5~IE8下vertical-align:text-top是把元素的ascent对齐父元素的ascent(即content top edge)

真的掌握vertical-align了吗？

到这里理论部分已经介绍完了，是时候通过示例来验证自己了！

单行文字的垂直居中对齐

字体大小14px

行数不固定的多行文字的垂直居中对齐

第一行文本
the second one.

大小不固定的图片的垂直居中对齐

总结

尊重原创，转载请注明来自：http://www.cnblogs.com/fsjohnhuang/p/5307706.html^_^肥子John

感谢

深入了解css的行高Line Height属性
我对CSS vertical-align的一些理解与认识（一）
CSS vertical-align的深入理解(二)之text-top篇
CSS深入理解vertical-align和line-height的基友关系
css行高line-height的一些深入理解及应用
大小不固定的图片、多行文字的水平垂直居中
深入理解 CSS 中的行高与基线

GPU云服务器云服务器深入理解系列深入理解linux 深入理解webrtc 深入理解python

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115125.html

CSS魔法堂：你真的懂text-align吗？

摘要：深入本届集团公司党委由公司党委由本届集团公司党委由公司党委由组均是，而组则是。下英文泰文等的默认对齐方式，下的默认对齐方式等同于，采用增加减少象形文字间的距离。前言也许提及text-align你会想起水平居中，但除了这个你对它还有多少了解呢？本篇打算和大家一起来跟text-align来一次负距离的交往，你准备好了吗？ text-align属性详解 The text-align C...

tinylcy 2019-08-30 12:54 评论0 收藏0
CSS魔法堂：一起玩透伪元素和Content属性

摘要：前言继上篇魔法堂稍稍深入伪类选择器记录完伪类后，我自然而然要向伪元素伸出魔掌的啦。和的注意事项默认必须设置属性，否则一切都是无用功默认，就是和的内容无法被用户选中的伪元素和伪类结合使用形如。前言继上篇《CSS魔法堂：稍稍深入伪类选择器》记录完伪类后，我自然而然要向伪元素伸出魔掌的啦^_^。本文讲讲述伪元素以及功能强大的Contet属性，让我们可以通过伪元素更好地实现更多的可能！ ...

DevTalking 2019-08-30 15:54 评论0 收藏0
CSS魔法堂：Absolute Positioning就这个样

摘要：更多关于的信息可参考魔法堂不得不说的因此的实际值则是相对于而言，我们可以通过来获取和的实际值。对于由于自身有固有的，因此当设置时，其实际值就是元素固有的。结果就是除均不为，而为时，会自动计算以满足等式。两条不满足外，其他情况均一致。前言当我们以position:absolute之名让元素脱离Normal flow的控制后，以为通过left和top属性值即可让元素得以无限的自由时，却...

Yangyang 2019-08-30 12:54 评论0 收藏0
CSS魔法堂：改变单选框颜色就这么吹毛求疵！

摘要：前言是否曾经被业务提出能改改这个单选框的颜色吧让它和主题颜色搭配一下吧，然后苦于原生不支持换颜色，最后被迫自己手撸一个凑合使用。设置为的样式行为特征单选框的行为特征，明显就是选中与否，及选中状态的改变事件，因此我们必须保持对外提供事件。前言是否曾经被业务提出能改改这个单选框的颜色吧！让它和主题颜色搭配一下吧！，然后苦于原生不支持换颜色，最后被迫自己手撸一个凑合使用。若抛开inpu...

freecode 2019-08-29 16:52 评论0 收藏0