line-height相关

Paste_Image.png

内敛元素的高度是由line-height决定的，不是由font-size决定的。
行高由于其继承性，影响无处不在，即使单行文本也不例外；高度的表现不是行高，而是内容区域和行间距，内容区域高度+行间距=行高。
内容区域高度只与字号和字体有关，在simsun字体下就是字号。
行间距是上下拆分的。用于保证高度正好等于行高。
多行文本的高度就是单行文本高度的累加
line-height值的类型：normal（默认值），数值，百分比，rem/em，inherit（继承）
1.5、150%、1.5em计算上没有区别，但1.5所有可继承元素根据font-size重计算行高；而150%、1.5em根据当前font-size计算行高，继承给下面的元素；
reset.css中建议使用1.5这种写法统一行高。
行高不会影响图片实际占据的高度，而是影响图片所在行文字的高度，即使没有文字

Paste_Image.png

如何消除图片底部间隙：
1、图片块状化{display:block}
2、图片底线对齐{vertical-align:bottom；}
3、行高足够小：{line-height:0;}
单图片水平居中
.box{line-height:300px;text-align:center;}
.box>img{vertical-align:middle;}
多行文本图片水平居中，实现方式与当行相同，区别是要把多行文本所在容器的display水平转换成和图片一样（inline-block），以及重置外部继承的text-align和line-height属性值
.box{line-height:250px;text-align:center}
.box>.text{display:inline-block;line-height:normal;text-align:left;vertical-align:middle;max-widht:100%}
.box>img{vertical-align:middle}