理解line-height

line-height：指的是行高；也就是两行文字基线之间的距离，取值为：line-height:base-line/bottom/middle/数值/百分比/normal/inherit/；默认值为base-line;

其相关知识点主要有一下几点：

1、内联元素的高度由line-height决定，而不是由font-size决定；

2、行高=内容区域高度+行间距；而行间距又可分为半行间距，分布在内容区域上下；

3、在SimSun字体下，内容区域高度为font-size;

4、多行文本的高度由单行文本高度累加；

5、在文本比较多的网页中，如博客，line-height一半设置为1.5/1.6；在一般的商业网站中，line-height一般设置为=20px/font-size;

图片在文本框中，一般下面会流出一些距离，那是因为基线的问题，等于半行边距；要消除那半行间距的方法有：

1、图片块状化：display:block;

2、图片与底线对齐：vertical-align:bottom;

3、行高足够小：基线位置上移，一般10px以下就行；

利用line-height实现大小不固定的图片垂直居中：

.box{line-height:300px;text-align:center;}
.box>img{vertical-align:middle;}