标签：内容 数值 学习 连接 特殊性 垂直 相对 区域 原理
学习过CSS肯定对line-height与vertical-align两个属性有印象；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的高度。
这种划分方法是根据属性值的类型来划分的，实际使用中感觉这样的划分方法不够合理，如线类中的baseline、middle是受到元素font-size影响，而top、bottom却是受到元素line-height影响；也就是说baseline、middle是子元素文本区域与父元素文本区域对齐，top、bottom是子元素内容区域与父元素内容区域对齐，不同的veritcal-align属性值，影响其对齐效果的属性都是不同的。
理解和正确使用line-height与vertical-align，首先要明确内容区域与文本区域的概念：
如上图div元素的实际高度是43而不是40，这是因为div中的文本存在一个为ling-height值40px的内容区域，而span也存在一个ling-height值40px的内容区域，这两个内容区域高度相等，但是vertical-align默认值为baseline，所以两者之间是关于文本区域对齐的，文本区域两者大小是不同的，即baselin所在位置不同，连接两个高度相同矩形，接口不在同一个位置，自然两者就无法对齐，父元素要包含这两个元素，高度也就不可能只有40px。div包含图片，底部出现空白也是因为这个原因了，图片的底部就是baseline，div中存在幽灵节点，两者基于baseline对齐造成了底部空白。
CSS中许多奇怪的现象都可以从概念的角度合理的去解释，在初步学习CSS的使用之后，进一步理解学习CSS的概念是非常有必要的。
line-height与vertical-align：简单的属性不简单
标签：内容 数值 学习 连接 特殊性 垂直 相对 区域 原理
原文地址：https://www.cnblogs.com/homehtml/p/11799383.html
