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

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

内联盒模型相关概念

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

Tip: 图中用不一样颜色的框标注了不少框，这些表明咱们下面要说的不一样的盒子或不一样的概念。

inline-box

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

line-box

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

container-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，而且来讲说这种现象的缘由。

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