[CSS学习] line-height属性讲解

记：本文可以作为张老师在慕课网上讲解课程的学习笔记

定义

line-height:通过查MDN文档可知

对于块级元素，CSS属性line-height指定了元素内部line-boxes的最小高度。对于非替代行内元素，line-height用于计算line box的高度。对于替代行内元素，如button/input等元素，line-height并没有影响。

查CSS参考手册，line-height表示字体最底端与字体内部顶端之间的距离，应该是不准确的。

张老师说：line-height表示两条基线之间的距离

通过MDN的定义可以知道，内联元素的高度是由line-height决定的，并不是由字体大小决定的。

 

高度机理

1. 行高line-height具有继承性，影响无处不在。

2. 高度的表现并不在于行高，而是在于内容区域和行间距。

内容区域高度+行间距=行高

内容区域高度只与字体和字号有关系

 

取值

line-height的取值有四种类型：normal  <number>  <length>  <percentage>

normal取决于user-agent，与font-family有关系。一般情况下都会在reset.css里面重置line-height

<number>无单位数字，实际计算值=number*字体大小，首选方法。

<length>用于计算line box的高度

<percentage>与元素自身的字体大小有关，实际计算值=percentage*元素计算出的字体大小

inherit行高继承，input等元素默认行高值为normal, 通过使用inherit可以让文本框样式的可控性更强

细微差别

line-height=<number>所有可继承元素根据font-size重新计算行高

line-height=<percentage>/<length>当前元素根据font-size计算行高后继承给子元素

 

line-height与图片的那些事儿

如果消除图片底部间隙的方法：

1. 图片块状化，这样就没有基线对齐

2. 图片设置底线对齐，默认图片和文字是基线对齐baseline

3. 设置足够小的行高使得基线位置上移 line-height: 0;

应用：

1. 小图片，大文字（图片和文字中线对齐）

保留图片的inline特性，设置文字的字体大小及行高，同时设置图片的vertical-align特性来实现某些效果

如img{vertical-align: bottom;}图片和文字保持底部对齐

img{vertical-align: middle；}图片和文字保持中线对齐

 

2. 大小不固定的图片，多行文字垂直居中

a. 图片的水平居中：

图片外部容器设置 {line-height: <length>; text-align:center; }

img{ vertical-align:middle;} 图片近视居中，细微之处在于，有隐藏的文本，所以偏差与字体和字号有关。

 

b. 多行文本水平垂直居中

设置外部容器{ line-height, text-align:center;}

内部文本标签需要修改display转换成和图片一样inline-block，同时重置外部继承的text-align和line-height属性值{text-align:left; vertical-align:middle;}

必要时设置max-width:100%;