相关概念：
leading （行间距）： 指填充在两行文字间的铅条，等于line-height 和 font-size之差，其中一半leading加到文字上方，另一半leading加到文字下方，只用于非替换元素。
em 框： em框指示没有行间距时基线之间的距离，不指定字符间的边界，实际的字形可能比其em框更高或更矮。
font-size ： 确定给定字体的em框（em box）的高度，但不能保证实际显示的字符就是这种大小。font-size属性和实际字体大小的具体对应关系由字体的设计者确定。
基线： the line upon which most letters "sit" and below which descenders extend，并不是汉字的下端沿，而是英文字母"x"的下端沿。
内容区（ content area ）： 非替换元素即em框串在一起组成的框，间接由font-size确定；替换元素：即元素固有的高度加可能的边距和框。
行内框（ inline box ）： 虚拟的矩形框，无法显示，大小为内容区加leading。对非替换元素，等于line-height值；对替换元素，等于内容区的高度。同一行内的若干元素可以有不同的行高和行内框高。
行框（ line box ）： 包含该行内所有行内框的最高点和最低点的最小框，行框的高度只同本行内元素的行高有关， 而和line-height无直接关系，和父元素的高度（height）也无关 。行内框在行中根据其vertical-align属性值垂直对齐。
匿名文本： 指所有未包含在行内元素中的字符串。
line-height： 指文本行基线之间的距离，确定了各个元素框增加或减少多少，默认为元素本身字体大小的1.2倍。
line-height值从父元素继承时，要继承在父元素上计算的值，而不是在子元素上计算的值（em等）。如果是缩放因子（没有单位的纯数字值），则继承的是缩放因子，不是计算的值，最终会计算缩放因子和子元素的font-size的乘积。
图1：
图2：css中的线
图3：确定行框高
替换元素
替换元素的边距和边框会影响该元素的行内框，继而影响行框的高度。
其内容不受CSS视觉格式化模型控制的元素,比如<img>、<input>、<textarea>、<select>、<object>，标签起到占位符的作用，实际内容不在文档中，叫做替换元素。浏览器会根据元素的标签类型和属性来显示这些元素。比如,img元素的内容通常会被其src属性指定的图像替换掉。替换元素通常有其固有的尺寸:一个固有的宽度,一个固有的高度和一个固有的比率。比如一幅位图有固有用绝对单位指定的宽度和高度,从而也有固有的宽高比率。另一方面,其他文档也可能没有固有的尺寸,比如一个空白的html文档。
CSS渲染模型不考虑替换元素内容的渲染。这些替换元素的展现独立于CSS。object,video,textarea,input也是替换元素,audio和canvas在某些特定情形下为替换元素。使用CSS的content属性插入的对象是匿名替换元素。
查看更多关于css中的线及vertical-align实例详解的详细内容...