line-height
1. 先来了解中行内元素的四条线：顶线，中线，基线，底线
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
margin: 0px;
padding: 0px;
}
span {
line-height: 2;
}
</style>
</head>
<body>
<div style="background-color:#e5edff;">
<span style="font-size: 30px;">中文Chinese</span>
</div>
</body>
</html>
- 顶线：行内元素中汉字文本的内容区域的最顶端
- 底线：行内元素中汉子文本的内容区域的最低端
- 基线：行内元素中英语文本中大写字母的最低端
- 中线：在顶线和底线中间距离的1/2处
2. 行高，行距和半行距
- 行高：行高= 上下文下顶线或底线或中线或者基线的距离 = 文本区域（font-size大小）+上下间距（1/2行距）
- 行距：上一行文本底线到下一行文本顶线的垂直距离
- 半行距：1/2行距，也等于(行高-font-size)/2
-
不同字体不同大小（font-size）默认的行高不同，例如默认字体的大小为12px，行高为18px
image.png
3. 内容区，行内框和行框
-
内容区：顶线到底线之间的区域
image.png - 行内框:每一行中所有的行内元素都会生成一个行内框，行内框是一个抽象的概念，无法显示，在没有设置padding的情况下，行内框等于行内元素的内容区域（顶线和底线之间的距离），行内框只受到行内元素的font-size和font-family影响
- 行框：行框也是抽象的概念，无法实际显示。在一行又多个行内元素时，以其中行内框最大的元素为基准，其他行内元素使用vertical-align垂直对齐时，参照该基准，行框的高度为最大行内框的高度+上半行距+下半行距
image.png
4. line-height的用法
image.png
5. 使用line-height实现垂直居中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
<!-- 当行内元素的行高等于父元素的高度时，可以实现垂直居中 -->
span {
line-height: 2;
line-height: 300px;
}
div{
height:300px;
border:1px solid red;
}
</style>
</head>
<body>
<div style="background-color:#e5edff;">
<span style="font-size: 50px;background: blue;margin-right: 50px;">中文Chinese</span>
</div>
</body>
</html>
vertical-align的用法
1. 作用
① 控制单元格内容的垂直对齐方式
② 控制多个行内（块）元素在一行上的垂直对齐方式
③ 控制行内（块）元素相对其父元素垂直对齐方式
注意： vertical-align 只对行内与行内块元素、表格单元格元素生效：不能用它垂直对齐块级元素
2.可选属性值
3.下面对每个属性值进行解释，以三个行内元素为例,代码和默认的页面效果如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#span1 {
font-size: 50px;
border: 1px solid red;
}
#span2 {
font-size: 30px;
border: 1px solid blue;
}
#span3 {
font-size: 70px;
border: 1px solid green;
}
</style>
</head>
<body>
<div style="background-color:#e5edff;">
<span id="span1" >span1</span>
<span id="span2">span1</span>
<span id="span3">span1</span>
</div>
</body>
</html>
-
top属性值（把指定元素的顶端和行中最高元素的顶端对齐，行内最高元素为行内框最大的元素），将span2 设置为vertical-align:top 效果如下:
image.png
-
bottom属性值（把指定元素的底端和行中最高元素的顶端对齐），将span1设置vertical-align:bottom效果如下：
image.png
-
baseline默认属性值（把指定元素的基线对齐与其父元素的基线，父元素基线为其文本基线）
image.png -
text-top(吧元素的顶端对齐与父元素字体的顶端)，将span3设置vertical-align:top效果如下：
image.png -
text-top(吧元素的底端对齐与父元素字体的底端)，将span3设置vertical-align:bottom效果如下：
image.png -
length(使元素的基线对齐到父元素的基线之上的给定长度。可以是负数。),将span3设置vertical-align:20px效果如下：
image.png
下面讨论行内所有的元素都为行内块元素的情况
- 当父元素的子元素包含行内元素时，其他行内块元素相对行内元素对齐，默认基线对齐
-
当行内块元素没有子元素时，即空元素，它的基线等于其margin-bottom底端（元素的底部为height+padding-bottom+margin-bottom），当包含子元素时，其基线等于子元素的基线（默认基线对齐）
image.png
image.png
- 当行中包含行内元素也包含行内块元素时，默认行内块的基线与行内元素(span3)的基线对齐效果如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#span3 {
font-size: 70px;
border: 1px solid green;
}
#div1 {
width: 100px;
height: 100px;
border: 1px solid blue;
display: inline-block;
}
</style>
</head>
<body>
<div>
<div id="div1">div1</div>
<span id="span1">span3</span>
<div id="div1"></div>
</div>
</body>
</html>
应用
通过上面的解释，我们知道了在一行中包含图片时，底部有空隙的原因了
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
background: gray;
}
</style>
</head>
<body>
<div>
<img src="a.jpg" id="img" />
</div>
</body>
</html>
图片属于没有子元素的行内块元素（基线在其底部），而图片之后有空白文本，默认行内块元素基线对齐与行内元素的基线，由于空白文本效果不明显，我们添加文本，之后的效果如下
我们只需将图片的vertical-align改成bottom（图片的底部对齐与行内元素的底部），就能解决问题，效果如下
