CSS-如何设置行内元素的垂直对齐方式，清除img标签底部空白缝隙，行高的设置

vertical-align 用于设置行内元素的基线相对于该元素所在行的基线的垂直对齐（设置行内元素和行内块级元素的垂直对齐方式）

属性值	说明
baseline	基线对齐，默认值
top	元素的顶端与行中最高元素的顶端对齐
middle	把此元素放置在父元素的中部
bottom	元素的顶端与行中最低的元素的顶端对齐

默认基线对齐：

.box {
  background: pink;
}

<div class="box">
  <img src="./images/cat.jpg" alt="">
  <span>这是一段文本span>
div>

文本顶端对齐：

.box span {
	vertical-align: top;
}

想让文本相对于图片垂直居中对齐，将图片的垂直对齐方式设置为居中对齐即可：

.box img{
	vertical-align: middle;
}

通过设置 vertical-align 还可以解决图片下方空白缝隙的问题（只要属性值不是 baseline 即可）；还有另一种解决办法，直接将 img 元素转成块级元素：display: block;

line-height 用于设置行的高度，其属性值不允许为负值，所谓的行高就是两行文本基线之间的距离；属性值可以是数字、像素（px）、百分比（%）等；为 数字 时此数字会与当前的字体尺寸相乘来设置行间距；为 百分比 时基于当前字体尺寸的百分比设置行间距


如果想要单行文本在元素中垂直居中对齐，将行高设置为元素的高即可