在前端开发中，控制不同大小的文字之间的对齐方式，或者文字与图标之间的对齐方式，似乎总是不太得心应手。总觉得少了点什么，这其实和CSS中内联元素相关的几个属性有很大关系。从我的角度来看，我通常遇到的CSS问题中有30%是因为不了解这些属性之间的关系。这里的第一篇文章首先介绍字体和掌握相关概念。技术是面向目的的，所以我们先问一个问题。在前端开发中，我们使用font-size来设置文字的大小，但是查看元素后，似乎大多数时候内联元素的高度并不是我们设置的字体。-size大小，这是为什么呢？这涉及到浏览器的影响、字体设计等方面的知识。特别是字体设计是一门高深的学问，我们在网页开发中只想控制文字的大小和对齐方式，所以这里只取需要的部分，先介绍一下字体的概念。字体相关概念我们先来了解一下文字的各种概念。图片看起来比较直观，所以就简单画了一张图。Baseline对比图可以看出，baseline就是字母x下面的那条线，所有的字符都是基于这条线定位的。这应该是每个人都知道的。毕竟vertical-align的默认值是baseline，就是指这一行。em-boxem-box可能比较少见，但是em这个单位大家肯定都知道。1em与元素的字体大小相同。还是以图片为例。如果设置font-size:20px，则em-box的高度将为20px。content-area这是一个很重要的概念。Content-area翻译成中文就是内容区。这里没有在图中标出，因为通常默认情况下，content-area和line-height是一样的高度。为行内元素设置背景，背景所占的区域可视为内容区域。在大多数情况下，内容区域的高度与em-box的高度不同。内容区域的高度受字体系列和字体大小的影响。有时即使字体大小相同，内容区域也可能因字体不同而不同。这是在字体设计时确定的。而em-box只受font-size的影响。这也解释了为什么我们有时会检查元素看到的高度是否与实际字体大小不同。对于半行间距，先看看行间距是怎么计算的，行间距=行高-字体大小。半行间距是把行间距一分为二，一个加在em-box上面，一个加在下面，构成了完整的文字高度。x-heightx-height，顾名思义，就是x字符的高度。1ex是x-height的值。平时没什么作用，但是对我们理解概念很有帮助。vertical-align:middle在css中的解释是Alignsthemiddleoftheelementwiththebaselineplushalfofx-heightoftheparent，意思是元素的中心点与父元素的baseline加一半对齐x-height高度。这句话有几个关键部分。元素的中心点，父元素的基线和基线加上x-height高度的一半你一定要明白。我们经常使用veritcal-align:middle出错，往往是这几个点没搞清楚，先试着理解这里，以后的文章会详细讲解。下面部分是对字体单位的介绍和一些理解。如果你已经看懂了，可以直接跳过。别浪费时间了，时间是宝贵的~css中字体大小的大小是用font-size来表示的。衡量单位有很多，主要分为三大类：关键字型、数值型、百分比型。关键字类型关键字类型分为绝对大小和相对大小。由于很少用到，不需要记忆，这里只列出来。绝对尺寸：xx-small、x-small、small、medium、large、x-large、xx-large。相对类型：较小，较大。数值类型数值类型在平时经常用到，数值类型常用的单位有px、em、rem，偶尔可能会用到ex，其他的基本不用，这里就不一一列举了。px代表像素，em是相对于父元素的字体计算的，rem是相对于根元素的字体大小计算的。其他应用的神奇font-size:0font-size:0很常用。在之前的Chrome中，font-size小于12px大于0的时候限制为12px，不过我最近用的是最新的Version65.0。3325.181(OfficialBuild)(64-bit)在Chorme下测试，发现没有这个限制（不知道什么时候修改的-_-）。使用font-size:0将字号改为0，通常将line-hight设为0，往往可以解决line-block元素的空隙问题。这个问题的具体原因我们后面会讲到。看了很多文章，终于总结整理出来了。下一篇介绍line-height，说说line-height在行内元素中的作用。如果本文有错误或者我的理解与大家不一致的地方，请指出，谢谢~。
