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

本文探讨了微信小程序中<image>标签底部出现留白的问题,详细解析了vertical-align属性及其默认值baseline导致的留白原因。提出了四种解决方法,包括将image转为块级元素、调整图片垂直对齐方式、设置父元素文字大小为0以及设定父元素和image高度。这些方法有助于理解和解决此类布局问题。
摘要由CSDN通过智能技术生成

序言

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

为什么会出现留白

image和img默认都是行内块元素,而他的vertical-align的属性默认为baseline,留白就是baseline和bottom之间的距离,如下图:
在这里插入图片描述
baseline下面的就是出现在留白

详细了解vertical-align

上图一目了然:
在这里插入图片描述
vertiacl-align的参数有 :

	baseline:基线对齐;  
	sub:下标; 
	super:上标;   
	top:顶端对齐; 
	text-top:与文本的顶端对齐;  
	middle:中部对齐;  
	bottom:底端对齐;  
	text-bott
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值