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

3,897 阅读4分钟

学习过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

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属性值,影响其对齐效果的属性都是不同的。

middle属性值不受line-height影响

top属性值会被line-height影响
上图显示的是改变子元素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的概念是非常有必要的。