微信小程序标签底部留白问题

序言

遇到小程序的或者html的标签，下方总会出现一道留白，有时候稀里糊涂就弄没了，为此专门了解了一下今天就详细讲解一下原因和解决方法，本文借鉴了img 图像底部留白的原因以及解决方法，其部分不太准确，加以修正。

为什么会出现留白

image和img默认都是行内块元素，而他的vertical-align的属性默认为baseline,留白就是baseline和bottom之间的距离，如下图：

baseline下面的就是出现在留白

详细了解vertical-align

上图一目了然：

vertiacl-align的参数有 ：

	baseline：基线对齐；  
	sub：下标； 
	super：上标；   
	top：顶端对齐； 
	text-top：与文本的顶端对齐；  
	middle：中部对齐；  
	bottom：底端对齐；  
	text-bottom：文本的底端对齐；   
	百分比和长度：CSS2，可为负数。

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9

可以根据上图在不同情况下使用参数

解决留白的方案

1.就是将image由行内块状元素改变成块状元素

	代码：image{
				display:block；
				}

• 1
• 2
• 3

2.就是改变图片的垂直对齐方式

	通过上图相信对vertical-align有所了解了，可根据情况使用对齐方式
	代码：vertical-align:middle:(top,bottom……)

• 1
• 2

3.设置父元素文字大小为0

	如：img父元素为div，设置div中 font-size：0 即可，这样会将默认的文本baseline线取消

• 1

4.设置父元素和image的高度

	div{
		height:100px;
	}
	image{
		height:100px;
	}

• 1
• 2
• 3
• 4
• 5
• 6

以上是我的理解，希望对你们有所帮助！！