理解line-height

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

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

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

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

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

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

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

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

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

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

三、行高足够小：基线位置上移，通常10px如下就行；

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

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