line-height:字面含义为行高,行高有三部分组成,分为内容高度,上间距,下间距。
可以看到文本在div盒子中的默认位置是左上角。此时文字部分的行高只有内容高度在支撑,上间距和下间距都是0。鼠标在字体上滑动时的蓝色部分就是此时span元素包裹的文本的行高(和span元素的背景色尺寸相同)。
当给span中的lline-height属性设置为300px时; line-height的值默认为normal,即文本默认从左上角开始显示。
span {....line-height: 300px;
}
此时,刷新可以看到,蓝色部分的高度占据盒子的整个高度。蓝色部分即此时的文本的行高。
当行高line-height的大小设置等于父级元素的高度(此处是300px)时。此时 line-height的值 减去 文本内容高度后,剩余的大小,上下间距均分,刚好填满父级元素盒子的整个高度,所以就实现了文本的垂直方向上居中显示的效果了。
当 line-height 小于 父级元素高度时,比如把line-height设置为200px,如下,文本在盒子的中线上方显示。
当 line-height 小于 父级元素高度时,比如把line-height设置为400px,如下,文本在盒子的中线下方显示。
上图可以看到当行高设置的比父元素盒子还要高时,那么文本的下间距就会溢出到盒子外部去了。但是行高依然存在。行高太大,文字有可能会在盒子的外边下方。
总结:只要line-height不按默认值normal设置。那么文本的上下间距的大小都是 line-height减去文本内容高度,然后剩余部分上下间距均分。
注意:line-height 只针对单行文本,实现垂直居中显示生效。在p,span等文本元素上设置生效,在img元素上设置无效。