vertical-align 图片底侧空白缝隙的问题

一、概述

vertical-align 不影响块级元素中的内容对齐，它只针对于 行内元素或者行内块元素，特别是行内块元素， 通常用来控制图片/表单与文字的对齐。

所以我们知道，我们可以通过vertical-align 控制图片和文字的垂直关系了。 然而默认的图片会和文字基线对齐

这样会造成一个问题，就是图片底侧会有一个空白缝隙。

代码如下所示：

	
	
	


	

		
		这是内容
	

效果图：

有个很重要特性你要记住： 图片或者表单等行内块元素，他的底线会和父级盒子的基线对齐。

二、去除图片底侧空白缝隙的解决办法

1.给img vertical-align:middle | top等等。 让图片不要和基线对齐。
2.给img 添加 display：block; 转换为块级元素就不会存在问题了。

	
	
	


	

		
		这是内容
	

这样最终就不会出现图片底侧空白缝隙的问题啦！