对于line-height的一些理解

来源：互联网发布：如何清除软件注册表编辑：程序博客网时间：2024/05/18 14:42

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

典型例子：

一. img标签的底部留白

这里写图片描述

<!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中任意添加一些文字就会清楚的看到这多出来的部分是从何而来

这里写图片描述

没错就是来自于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
这里写图片描述

<!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元素之后的效果：
这里写图片描述

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

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

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

0 0