对于line-height的一些理解

凡是有inline-block元素的地方就会有line-height的存在，就算你不设它的值，line-height依然通过继承来的fontsize等属性获得与之相匹配的line-height，这也是许多inline-block元素使用过程中出现各种怪现象的原因

典型例子：

一. img标签的底部留白

对于line-height的一些理解

<!DOCTYPE html>
<html>
    <head>
        <style>
            div{border: 1px solid #000;}
        </style>
    </head>
    <body>      
        <div>
            <img src="http://img.cy-cdn.com/w3/638/[email protected]_402w" alt=""/>
        </div>
    </body>
</html>

没错就是来自于img的vertical-align的默认值是baseline，也就是图片的默认垂直对齐方式是与文字的基线对齐，即使没有文字的情况下，img的父元素div依然通过一层一层的继承，拥有自己的fontsize，也就拥有了line-height值。因此要去掉这段空白可以修改img的默认vertical-align，也可以修改父元素div的font-size=0，或者更直接的修改父元素div的line-height=0；

二. 空inline-block和非空inline-block的对齐问题

两个相同样式的inline-block的空span
对于line-height的一些理解

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            div{width: 600px;height: 600px;border: 1px solid #000;}
            span{ display: inline-block;width: 200px;height: 200px;border: 1px solid #000;}
        </style>
    </head>
    <body>
        <div class="con">
            <span> </span>
            <span> </span>
        </div>      
    </body>
</html>

在一个span中添加任意inline或者inline-block元素之后的效果：
对于line-height的一些理解

出现这种情况的原因是容器的基线位置发生了改变

一个inline-block元素，如果里面没有inline内联元素，或者overflow不是visible，则该元素的基线就是其margin底边缘，否则，其基线就是元素里面最后一行内联元素的基线。

第一个span里面没有任何inline元素，基线是他的下边缘，而第二个元素包含了文字这种inline元素，他的基线就是里边文字的基线，就酱！