img标签的底部间隙问题

首先来看一下img标签在div中的底部间隙

造成img标签的底部间隙的原因

img标签为行内元素(inline)，默认对其方式为vertical-align: baseline(基线对齐)

解决img标签底部间隙的几种方法

• 方法一：将对其方式改为底线对其

img {
    vertical-align: bottom;
}

• 方法二：修改行高，使行高变小，这样基线下方的位置基本可以忽略。

div {
    line-height: 0px;
}

• 方法三：直接让img变成块级元素，不在受行内基线的影响。

img {
    display: block;
}
//或者
img {
    float：left;
}