vertical-align: middle;

同学你好，设置display:block;也可以去掉白边，二者原理不同。只有图片是行内块时，才会有底部的白边。而display:block;是把图片转成了块级元素，相当于把图片的性质改变从而消除间隙。而vertical-align没有改变图片的性质，只是把对齐方式改变了。

此处简单了解一下即可。

祝学习愉快~！

同学你好，解答如下：

1、vertical-align用来设置行内元素的垂直对齐方式。img标签具有行内元素的性质，所以它也能使用该属性。

2、图片与文字默认是基线对齐的，所以图文与文字在一行布局时，由于文字会超出图片，所以图片底部会有一个白边：

而给图片设置vertical-align: middle;后，则会让图片与文字中线对齐，此时文字就不会超出图片，进而去除了底部的白边：

​3、即使图片后面没有文字，浏览器在渲染的时候，也会加上一个“幽灵空白节点”，它的宽度为0，跟文字表现形式一样。所以即使将图片后面的文字去掉，图片底部的间隙也在，此时可以使用vertical-align: middle;来去除该间隙。

祝学习愉快！