line-height的使用

行高指的是两条基线之间的距离，即内容区域和两个半行间距的累加
1.图片水平垂直居中
.box {line-height:300px;text-align:center;}
.box > img {vertical-align:middle;}
但是该效果受box类里面的文字大小影响，文字的size越大，图片为了和文字的基线对齐，图片越是下沉，如果想达到较好的图片居中效果，box的font-size:0px;才能实现真正的垂直居中
2.多行文本水平垂直居中
.box {line-height:250px;text-align:center;}
.box > .text {display:inline-block;line-height:normal;text-align:left;vertical-align:middle;max-width:100%;}
3.ie6/ie7上面设置行高代替高度，可以避免haslayout现象
4.清除图片下方的间隙
a.图片块状化-无基线对齐
img {display:block;}
b.图片底线对齐
img {vertical-align:bottom;}
c.行高足够小，图片基线位置上移
.box {line-height:0;}
d.如果盒子里面没有文字
.box {font-size:0px;}
5.小图片大文字
用vertical-align属性控制图片的位置