HTML/CSS：img 图片标签空隙的问题（inline 元素垂直居中/对齐）

做商品详情页的时候，发现详情图多张的情况下，即使设置了 margin:0;padding:0 也不能让两张图片上下之间没有空隙。

原因是 img 标签是行内元素，默认的图片对齐方式为 vertical-align: baseline;，即基线对齐。baseline 对其方式导致图片并不是与 div 的真实底部对齐，而是与文基线对齐。文基线就是字母 x 的下边缘，即使没有文字，也会有空隙。

解决办法

• 方法一

将图片设置为块元素。

display: block;

• 方法二

垂直对齐方式改为底部对齐。

vertical-align: bottom;