line-height

所有的元素都有一个line-height，这个值会显著地影响行内元素如何显示。
line-height由行内盒子模型引出来，在css权威指南这本书上有写
内容盒子，有时候我们没写内容，让也会有一个匿名文本的东西，
内联盒子
行内盒子，这个框通过向内容区增加行间距来描述。
包含盒子
内联元素由行高决定
内容区域高度+行间距=行高
百分数继承父级元素
匹配20像素的使用经验，line-height用20像素除高度就可以了
行高在图片内改变了行内高度，基线对齐，空白内容也是有东西的
隐匿文本节点

如何消除图片底部的间隙

下面是三种方法：
1.块状化，无基线对齐

img {
    display: block;
}

2.图片底部对齐

img {
        vertical-align: bottom;
}

3.行高足够小-基线位置上移

.box {
    line-height:0
}

应用
图片的垂直居中

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

多行文本水平垂直居中

.box {
    line-height: 250px;
    text-align: center;
}
.box > .text {
    display: inline-block;
    line-height: normal;
    text-align: left;
    vertical-align: middle;
}

有时候我们写垂直居中这样写

{ height: 36px; line-height: 36px;}

其实必要这么写
直接

line-height: 36px;

就可以了。