行高，文本对齐

行高：文本基线间垂直间距。文本有顶线，中线，基线，底线。

 行距：指文本一行底线到下一行顶线的垂直距离。设定行高时行内框高度不变，改变的高度分成两个半行距分别增加(减少)到行内框(内容区域)的上下两边。（半行距=行高减字体大小除2）

 行框：本行虚拟矩形框，是一个概念，无实际显示。行框高度等于本行内所有元素中行内框最大的值 （以行高值最大的行内框为基准，其他行内框采用自己的对齐方式向基准对齐，最终计算行框的高度） ，当有多行内容时，每行都会有自己的行框。。

 行内框：是一个模型概念，无实际显示，在没有padding等属性影响下，行框等于内容区域。

文本垂直居中：

1. line-height = height （大多数情况下常用）

2. vertical-align：middle （较少用）

   该属性其他值：
   	baseline： 基线对齐；
   	sub： 下标显示；
   	super： 上标显示；
   	top： 顶端对齐；
   	text-top： 文本的顶端对齐；
   	middle： 中部对齐；
   	bottom： 底端对齐；
   	text-bottom： 文本的底端对齐；
   

vertical-align

失效原因：实际上，一个Box中由很多行很多元素组成，vertical-align只作用于在同一行内的元素，它的垂直并不是相对于整个Box而言的。一般只需要将父元素设置为：display:table-cell; /*按照单元格的样式显示元素*/ ，在父元素上应用 vertical-align属性就可得到预期效果。

行高继承： 当父元素行高有单位时，如px，% , em等子元素行高会继承父元素行高的具体值，如果使用倍数，子元素会根据自己的字体大小进行计算行高

<div style="line-height="150%" font-size:10px">
	<p style="font-size="30px"">AAA</p>
</div> 
//会因行高不够导致AAA文本重叠，此时P的行高继承div为15px

<div style="line-height="1.5" font-size:10px">
	<p style="font-size="30px"">AAA</p>
</div> 
//此时p的行高是45px，文本不会重叠

不同元素类型的行高
行元素，如span，没有高度和宽度，无行高。可应用padding和margin调整。
块、行内块均有行高

图片底部3像素边距问题
由于img是行内块元素，他是按文本排列的，所以基线到底线会有距离，也就是看到的边距。
▲!inline和inline-block 类型的都是按照本文排列的，都可以使用文本对齐属性。
消除方法：
1、使用把基线调整到盒子底部 vertical：bottom，。
2、把他的类型改为块元素 ，display：block。