图片与文字间出现间隙的原因与解决方案

一 ，样式书写底部出现间隙

在dom的实现中，经常会出现底部有间隙，其受多种因素的影响：

在项目的实现中，图片与底部会出现间隙，其原因是：

类比于图片前面还有一个宽度为0的空白字符，这里是将其具象化为X，书中将其称为“幽灵空白节点”

对应的解决方法

1. 图片块状化，就可解决“幽灵空白节点”
2. line-height足够的小
3. font-size足够的小
4. vertical-align:top/middle;

二 ，深入了解vertical-align与display：inline-block；的相互影响关系

vertical-align:baseline;面对俩个同时设置了inline-block的元素，展示的现象如下：

1. 有文字时，基线对齐
2. 没有文字时，底边框对齐
   

.dib-baseline {
	display: inline-block;
	width: 150px;
	height: 150px;
	border: 1px solid #cad5eb;
	background-color: #f0f3f9;
}
<span class="dib-baseline"></span>
<span class="dib-baseline">x-baseline</span> 

图一：左div是没有文本，相当于直接块状化，直接是底边框对齐。右div是有文本，相当于直接内联元素，直接是基线对齐
图二：是将line-height的高度直接设置为0，字符占据的高度为0，字符的起始高度为字符内容的垂直中心位置，相对于基线的对齐，所以呈现的对齐是文本中心线的对齐

让icon与文本始终垂直的方法

基于以上所讲述的display: inline-block之间的对齐方式，将icon的图标增加文本内容，则icon标签与后面的文本天然的基线对齐，实现如下：

<style>
	.icon__box {
		line-height: 20px; // 统一的行高显示
	}
	.icon {
		display: inline-block;
	    width: 20px;
	    height: 20px;
	    white-space: nowrap;
	    letter-spacing: -1em;
	    text-indent: -999em; // 隐藏icon的文本内容展示
	    margin-right: .05rem;
	}
	.icon::before {
		content: '/3000';
	}
	.icon_money {
		background: url(../images/money.png) no-repeat center;
	}
	// 
</style>
<p class='icon__box'>
	<i class="icon icon_money">money</i>
	<span style="font-size: 20px;">钱包 - font-size: 20px;</span>
</p>
// icon内无文本，使用::before的content去添加一个空格
<p class='icon__box'>
	<i class="icon icon_money"></i>
	<span style="font-size: 20px;">钱包 - font-size: 20px;</span>
</p>

三，图标与文字居中对齐的方式

font-size：0；消除空白节点在底部的间距，使用vertical-align：来设置垂直方向的对齐方式
font-size：0时字体的大小足够小，基线与中线几乎重合在一起

示例代码如下：

<style>
.text {
    font-size: 24px;
    background: gray;
}
p {
    margin: 0;
}
img {
    height: 100px;
    background: hotpink;
}
.icon_box1 {
    background: #c0c0c0;
    /* 改变间距 */
    font-size: 0;
    margin-bottom: 10px;
}
.icon__img1 {
    height: 100px;
    background: hotpink;
}
.icon__text1 {
    display: inline-block;
    vertical-align: top;
    /* vertical-align: bottom; */
    line-height: 100px;
}
.icon__img3 {
    font-size: 24px;
    width: 20px;
    height: 1ex;
}
.icon_box2 {
    background: #c0c0c0;
    margin-bottom: 10px;
    font-size: 0;
}
.icon__img2 {
    vertical-align: middle;
}
.icon__text2 {
    vertical-align: middle;
    display: inline-block;
}
</style>
<h5>font-size：0,消除空白的间距与底部的间距</h5>
<div class="icon_box1">
	<image class="icon__img1" src="https://pic.qqtn.com/up/2019-9/15690311636958128.jpg"></image>
	<span class="text icon__text1">图标</span>
</div>
<h5>都保持vertical-align: middle的居中</h5>
<div class="icon_box2">
	<image class="icon__img2" src="https://pic.qqtn.com/up/2019-9/15690311636958128.jpg"></image>
	<span class="text icon__text2">图标</span>
</div>