上一篇我们讨论了font-size，这篇文章讲的是另一个与文本密切相关的属性line-height。这就涉及到inlinebox模型相关的东西了。在这里，我们保持与前一个类似的结构。先说概念，再说度量单位，最后说说内联元素的一个普遍现象。内联盒模型相关概念说到盒模型，懂CSS的人基本都知道这个概念，但是说到内联盒模型，很多人可能不是特别清楚。下面说说内联盒模型的几个重要概念。先看图概览，再逐项往下看。提示：很多方框在图中用不同颜色的方框标出，代表不同的方框或者不同的概念，我们下面会讲到。inline-boxinline-box，也称为行内框，通常是由一些标签包裹而成，最常用的标签包裹文本会形成一个行内框，那些没有标签包裹的文本默认会形成一个框称为匿名内联框Anonymousinlineboxes。line-boxline-box被称为linebox。从名字就可以看出，它是由单行内联元素组成的区域。请注意，每条线都会形成。如果文本由五行组成，将形成五个行框。一个linebox的高度基本上是由linebox中最大的inlinebox决定的。我基本上使用这个词是因为还有其他情况，例如受vertical-align属性的影响。containing-boxcontainer-box是包含块的意思。在内联元素中，包含块由行框组成。说白了就是所有linebox外面包裹的一层box。struct这个词可能很多同学很少见到。张新旭大师称之为“鬼空节点”，我们这里直译“柱”字。CSS规范中有这么一句话，Eachlineboxstartswithazero-widthinlineboxwiththeelement'sfontandline-heightproperties。我们称那个假想的盒子为“结构”。翻译过来就是每个行框都以一个行内框开始，行内框的宽度为0，行高和字体大小与元素相同。这个假想的行内框被称为“柱子”。简单的说，可以想象在linebox的前面有一个宽度为0的空字符。可能有人会问，这东西有什么用？(⊙v⊙)嗯，它是有用的，因为它几乎无处不在的特性，也因为它的0宽度，我们平时在内联元素中遇到的很多奇怪的问题都是由“struct”引起的。这个暂时先放一边，文章的最后，我们再看看这个东西带来的问题。计量单位这部分讲的是行高的单位。我们不再列出所有的单位，因为这些都可以从官方文档中看到。我们这里只讲重要的或者容易出错的部分。默认值line-height的默认值是多少？查说明书很容易看出它的值是正常的，那么多大才算正常呢？据我了解，它的价值受字体系列和浏览器的影响。IE/Firfox和chorme之间存在一些差异。但是你可以知道的是，normal的初始值和字体的content-area的高度是一样的。不知道content-area的同学可以去我上一篇文章的line-height部分看。这里简单说一下，inlinehorizo??ntal元素设置背景后，背景部分就是内容区域的部分，与初始line-height等高。百分比、em和数值之间的差异。百分比与em和数值的区别在于继承性质的不同。百分比和em的继承值是计算值，而数值类型的继承是一种“计算规则”。在FAQ的这一部分，我们来谈谈内联元素的一些常见问题。display：inline-block元素之间的间隙大家都遇到过。你可以看看我做的例子的第一部分。首先我们会看到元素与元素之间存在一定的间隙。这个gap会带来的问题是，如果我们将两个display:inline-block元素的width设置为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元素添加了text，发现元素都下移了。原理是什么？这就涉及到了vertical-align属性的一些属性。下一篇我们会讲到vertical-align，说说出现这种现象的原因。文中如有错误，或有更好的建议，欢迎指正~，原文链接。
