line-height各类属性值

line-height支持属性值

1.normal（默认属性）

跟着用户的浏览器走，且与元素字体关联

normal值 = 字体大小/100

2.<number>

使用数值作为行高值。如：line-height:1.5 根据当前元素的font-size大小计算 line-height = 1.5*20px(font-size) = 30px

3.<length>

使用具体长度值作为行高值

4.<percent>

使用百分比作为行高值

5.inherit（继承）

input框等元素默认行高是normal,使用inherit可以让文本框样式可控性更强

实例1：图片下有间距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div style="background-color: gray">
        <img src="123.jpg" style="width: 300px">
    </div>
    <!-- 引起这个问题的原因是图片后接了行藏文本元素，而默认的vertical-align：baseline
      也就是说图片要对其隐藏文本元素的基线，所以引发了下面间距的问题
      解决的办法有三个：1.img元素display:block
                       2.img元素vertical-align:bottom
                       3.父级div元素line-height:0
    -->
</body>
</html>

 

 

 

 

 

posted @ 2018-07-20 14:30  我的TURF  阅读(725)  评论(0)  编辑  收藏  举报