对于line-height的一些理解

时间 2019-12-04 标签对于 line height 一些理解

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

典型例子：html

一. img标签的底部留白web

<!DOCTYPE html>
<html>
    <head>
        <style> div{border: 1px solid #000;} </style>
    </head>
    <body>      
        <div>
            <img src="http://img.cy-cdn.com/w3/638/larg.jpg@262h_402w" alt=""/>
        </div>
    </body>
</html>

若是在div中任意添加一些文字就会清楚的看到这多出来的部分是从何而来svg

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

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

两个相一样式的inline-block的空span
cdn

<!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元素以后的效果：
xml

出现这种状况的缘由是容器的基线位置发生了改变htm

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

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