CSS图片下面有间隙的6种解决方案

在前端开发中，我们经常会遇到图片下面有间隙这个问题。这是因为图片默认的`display`属性为`inline-block`，而`inline-block`元素在渲染时会有4像素的空白间隙。为了解决这个问题，我们可以使用下面的6种方法。

1. 将图片转化为块级元素

第一种方法是将图片转化为块级元素。这种方法的原理是将图片的`display`属性从默认的`inline-block`修改为`block`。这样图片就会变成块级元素，不再会受到`inline-block`元素的空白间隙的影响。

img {
  display: block;
}

2. 使用负的margin值

第二种方法是使用负的`margin`值来消除图片下面的空白间隙。我们将图片的`margin-bottom`属性设置为负数，这样图片就会向上移动，从而与上方元素贴合，消除了空白间隙。

img {
  margin-bottom: -4px;
}

3. 设置font-size属性

第三种方法是设置`font-size`属性。我们可以将`font-size`属性设置为0，并在需要显示文本的元素中重新设置`font-size`属性，这样就能消除空白间隙了。

.container {
  font-size: 0;
}
.text {
  font-size: 16px;
}

4. 使用vertical-align属性

第四种方法是使用`vertical-align`属性。我们可以将图片的`vertical-align`属性设置为`middle`，就能消除空白间隙了。

img {
  vertical-align: middle;
}

5. 使用line-height属性

第五种方法是使用`line-height`属性。我们可以将`line-height`属性设置为与容器高度相同的值，这样就能消除空白间隙了。

.container {
  height: 50px;
  line-height: 50px;
}

6. 使用Flex布局

最后一种方法是使用Flex布局。我们可以将容器设置为Flex布局，然后将图片的`align-self`属性设置为`flex-end`，就能消除空白间隙了。

.container {
  display: flex;
  align-items: flex-end;
}

以上就是解决CSS图片下面有间隙的6种方法，每种方法都有自己的优缺点，需要根据具体情况选择合适的方法来解决问题。