行高code1
<!DOCTYPE html>
<html>
<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>inline</title>
<style>
span{
background:red;
}
.c1{
line-height: 20px;
}
.c2{
line-height: 8px;
}
.c3{
line-height: 30px;
}
.c5{
line-height: 28px;
}
/* 行高会决定上下多余的高度 过高会把外面的盒子撑起来 这里导致了line box高度为30px*/
/* 一行元素称为line box，line box的高度是由inline box决定的 */
</style>
</head>
<body>
<div>
<span class="c1">inline box xfg中文</span>
<span class="c2">inline box</span>
<span class="c3">inline box</span>
inline box
<span class="c5">inline box</span>
</div>
</body>
</html>
行高code2
<!DOCTYPE html>
<html>
<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>line-height</title>
<style>
.cc1{
font-size:12px;
}
.cc2{
font-size:18px;
}
.cc3{
font-size:24px;
}
</style>
</head>
<body>
<div style="border:solid 1px red;">
<span style="background:blue;color:#fff;font-size:20px;line-height:60px;">
居中xfg                     
</span>
<!-- background-color的展示高度是由font-size决定的 -->
<!-- 当line-height大于字体高度是会上下居中，上下会留出空隙 -->
</div>
<div class="c1">
<span class="cc1">第一段</span>
<span class="cc2">第二段</span>
<span class="cc3">第三段</span>
<!-- css 文字的默认基线是对齐的，也就是中文字体的底线 -->
<!-- 如果三个span都设置vertical-align:middle，就会居中对齐 -->
</div>
<div style="background:red">
<span>文字</span>
<img src="test.png"/>
<!-- img是行内元素，就要遵守行高的构成，是基于基线对齐的，所以下面就会有空隙（因为基线和底线有空隙） -->
<!-- 解决方法一：设置vertical-align:bottem，让图片根据底线对齐 -->
<!-- 解决方法二：设置display:block,让图片变成块级元素，就不用遵守行高的构成 -->
</div>
<div>
<div style="float:left">
<span>第一段</span>
</div>
<div style="float:left">
<span>第二段</span>
</div>
</div>
</body>
</html>
