line-height与vertical-align：简单的属性不简单

Posted 2020-11-21 homehtml

学习过CSS肯定对line-height与vertical-align两个属性有印象；line-height用来设置行高，vertical-align用来设置文本垂直方向的对齐方式，两种看似十分简单，但是其应用及原理却不简单

line-height

line-height与内容

先思考个问题：默认的div元素高度为0，为什么添加了文字之后，高度就有了？这个高度是由哪个属性决定的？如果是span元素，高度又是又谁决定的呢？

如上图所示，结果应该很明确了：影响div元素高度的是line-height属性，影响span元素高度的是font-size属性，更准确的说法应该是line-height决定块状元素的内容区域高度，而font-size影响行内元素的文本区域高度，这里请记住内容区域与文本区域不是同一个概念。

line-height与x

我们这里的x就是26个英文字母中的x。由于自身形态的一些特殊性，这个小小的不起眼的字母在CSS中是一个很重要的概念。
如基线base-line的定义就是：

字母x 的下边缘（线）就是我们的基线。

vertical-align中的middle指的就是：

关于基线向上1/2的x高度对齐

而x的高度甚至作为一个尺寸单位，这个单位就是ex，就是指小写字母x的高度。

veritcal-align

张鑫旭在《CSS世界》中一书中，将veritcal-align属性值分为4类：

• 线类，如baseline（默认值）、top、middle、bottom；
• 文本类，如text-top、text-bottom；
• 上标下标类，如sub、super；
• 数值百分比类，如20px、2em、20%等。

这种划分方法是根据属性值的类型来划分的，实际使用中感觉这样的划分方法不够合理，如线类中的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对齐造成了底部空白。

CSS中许多奇怪的现象都可以从概念的角度合理的去解释，在初步学习CSS的使用之后，进一步理解学习CSS的概念是非常有必要的。