深入理解-CSS内联元素之line-height

上一篇文章我们讨论了font-size，这一篇来说另一个与文字关系密切的属性line-height。这里涉及到了内联盒模型相关的东西，这里保持了与上一篇类似的结构，先来说说概念，然后是度量单位，最后来聊一个常见的内联元素的现象。

内联盒模型相关概念

说到盒模型，只要了解css的基本都知道这个概念，但说到内联盒模型可能很多人不是特别清楚。现在我们就来说说内联盒模型几个重要的概念。先看图概览一下，再逐项往下看。

Tip: 图中用不同颜色的框标注了很多框，这些代表我们下面要说的不同的盒子或不同的概念。

inline-box

inline-box又名内联盒子，通常由一些标签包裹形成，最常用的如<span>标签包裹文字会形成内联盒子，那些没有标签包裹的文字默认自己形成一个盒子称为anonymous inline box匿名内联盒子。

line-box

line-box名为行框，从名字就可以看出，它是由单行内联元素形成的一个区域，注意是每一行都会形成，如果文字由五行，就会形成5个行框。行框的高度基本上是由行框中行高最大的内联盒子决定的。我使用基本上这个词，是因为还有其他情况，比如受到vertical-align属性的影响。

containing-box

container-box就是包含块的意思，在内联元素中，包含块是由行框组成的。说白了就是包裹在所有行框外面的那层盒子。

struct

这个词可能很多同学见的比较少，张鑫旭大神称之为”幽灵空白节点“，我们这里就用直译过来的词”支柱“。

在CSS规范中有这么一句话，Each line box starts with a zero-width inline box with the element's font an d line-height properties. We call that imaginary box a ”struct"。翻译过来意思就是每一个行框开始的位置都有一个宽度为0，并且行高和字体大小都与该元素相同的内联盒子。这个假想的内联盒子就被称为“支柱”。简单来说就是可以想象成行框前面有一个宽为0的空字符。

可能有的人会问，这个东西有什么用那？(⊙v⊙)嗯，用处大了去了，由于其几乎无处不在的特性并且由于宽度为0，我们平时在内联元素中遇到的很多奇怪的问题都是由“struct”引起的。我们暂时先放下这个，文章的最后我们再看这个东西引发的问题。

度量单位

这一部分说说行高的单位，我们不再列出所有的单位，因为这些完全可以从官方文档上看到，我们这里只说说重要的或者说容易错的部分。

默认值

line-height的默认值是什么，查下手册我们就能很容易的看到，它的值是normal，那么normal是多大？从我的理解来说，它的值受到font-family和浏览器的影响，IE/Firfox与chorme表现存在部分不一样的地方。但可以知道的是normal的初始值与字体的content-area的区域高度相同。不了解content-area的同学可以去看我的上一篇文章的line-height部分。这里简单说一下，inline水平的元素设置背景后，背景部分就是内容区域的部分，与初始line-height同高。

百分比、em和数值的区别

百分比和em与数值的区别在于继承性质上的不同，百分比和em被继承的是计算后的值，而数值类型的继承的是一种“计算规则”。

常见问题

这一部分我们来说一说常见的内联元素的一些问题。

display: inline-block元素间的空隙

这个问题，大家都遇到过，大家可以看看我做的实例的第一部分。首先我们会看到元素和元素之间的一定的间隙。这个间隙会引发的问题有，如果我们设置两个display: inline-block的元素宽度为width: 50%都向右或向左浮动，但是确无法排在一行的情况。这就是由于多出了这一点间隙，导致容器宽度不足，最后容器一行无法放不下两个宽度都为容器一半宽度的元素。

有人可能觉得这些元素间的间隙比较奇怪，但这是一种正常现象，因为内联元素本来的排版就应该有间隙，你能够想象文字和文字之间没有间隙的情况吗？内联元素之间本来就应该独立分开。怎么解决这个问题，网上也有很多答案，这里只简单提一下，因为我们主要说的是原理嘛。通过设置font-size为0，或者使用letter-spacing属性，都可以达到去除内联元素之间的间隙的目的。

在我实例第一部分中应该很多人也注意到，在父容器的最底端也有一个空隙，这个到底是什么那？还记得我上面概念中提到的struct吗，这种现象就是由这个东西引起的，由于其不可见，所有我们用一个内联元素x来代替。这里可以看实例的第二部分。这个现象的原因是由于内联元素是默认vertical-align元素对齐的，而我们的内联元素的基线是默认为元素的底边缘，sturct元素又有自己的行高，当它的基线与我们的内联元素对齐时，它的行高会撑起一部分距离，就出现了实例中的现象。

知道了原因，我们解决起来也很简单。只要struct元素的行号为0就可以了，所有我们可以设置父元素的line-height: 0或者通过设置font-size: 0来间接设置line-height为0。可能已经有人法相，font-size: 0可以同时解决元素间的间隙和底部的间隙，所以我更喜欢用这个方法。

下面我们做一下其他的操作，我们在实例第三部分中，前面三个inline-block元素中加上文字，发现元素都往下移动了，这又是什么原理那。这其中就涉及到了vertical-align属性的一些性质，我们下一篇就来讲讲vertical-align，并且来说说这种现象的原因。

文章中如有错误的地方，或者您有更好的建议欢迎指正~，原文链接。