line-height与vertical-align：简单的属性不简单
先思考个问题：默认的div元素高度为0，为什么添加了文字之后，高度就有了？这个高度是由哪个属性决定的？如果是span元素，高度又是又谁决定的呢？
如上图所示，结果应该很明确了：影响div元素高度的是line-height属性，影响span元素高度的是font-size属性，更准确的说法应该是line-height决定块状元素的内容区域高度，而font-size影响行内元素的文本区域高度，这里请记住 内容区域与文本区域不是同一个概念 。
我们这里的x就是26个英文字母中的x。由于自身形态的一些特殊性，这个小小的不起眼的字母在CSS中是一个很重要的概念。
如基线base-line的定义就是：
字母x 的下边缘（线）就是我们的基线。
vertical-align中的middle指的就是：
关于基线向上1/2的x高度对齐
而x的高度甚至作为一个尺寸单位，这个单位就是ex，就是指小写字母x的高度。
张鑫旭在《CSS世界》中一书中，将veritcal-align属性值分为4类：
这种划分方法是根据属性值的类型来划分的，实际使用中感觉这样的划分方法不够合理，如线类中的baseline、middle是受到元素font-size影响，而top、bottom却是受到元素line-height影响；也就是说baseline、middle是子元素文本区域与父元素文本区域对齐，top、bottom是子元素内容区域与父元素内容区域对齐，不同的veritcal-align属性值，影响其对齐效果的属性都是不同的。
上图显示的是改变子元素line-height（内容区域）对对齐的影响，此外根据veritcal-align属性值不同，子元素的内容区域、文本区域，父元素的内容区域、文本区域都会对对齐造成影响，设置百分比或相对尺寸更是会与font-size与line-height两个属性产生直接联系，可见简单的vertical-align想要合理使用并不是那么简单的。
理解和正确使用line-height与vertical-align，首先要明确内容区域与文本区域的概念：
在一般情况下，可以认为font-size影响span，span内容大小即为文本区域，line-height影响div，div的内容大小即为内容区域。这里要注意影响并不是简单的font-size或line-height数值就决定区域的高度。
如上图div元素的实际高度是43而不是40，这是因为div中的文本存在一个为ling-height值40px的内容区域，而span也存在一个ling-height值40px的内容区域，这两个内容区域高度相等，但是vertical-align默认值为baseline，所以两者之间是关于文本区域对齐的，文本区域两者大小是不同的，即baselin所在位置不同，连接两个高度相同矩形，接口不在同一个位置，自然两者就无法对齐，父元素要包含这两个元素，高度也就不可能只有40px。div包含图片，底部出现空白也是因为这个原因了，图片的底部就是baseline，div中存在幽灵节点，两者基于baseline对齐造成了底部空白。
