首先来看一下img标签在div中的底部间隙
造成img标签的底部间隙的原因
img标签为行内元素(inline),默认对其方式为vertical-align: baseline(基线对齐)
解决img标签底部间隙的几种方法
- 方法一:将对其方式改为底线对其
img {
vertical-align: bottom;
}
- 方法二:修改行高,使行高变小,这样基线下方的位置基本可以忽略。
div {
line-height: 0px;
}
- 方法三:直接让img变成块级元素,不在受行内基线的影响。
img {
display: block;
}
//或者
img {
float:left;
}