如何摆脱图像下的空隙？

在本文中，我们将看到如何在实现 CSS 边框属性的同时消除图像下方产生的间隙。通常，我们已经看到，当我们在图像上应用边框属性时，还会在图像周围或图像下方产生额外的空白。例如，在使用

标签时，当我们将图像放入其中时，我们会在 div 的下边框和其中的图像之间获得一些额外的空白（几乎 2px）。

例子：

HTML

输出：

图像下端和 div 底部绿色边框之间的微小间隙。

这件事发生的原因是由于浏览器的默认行为，它不是浏览器中的错误或任何类型的技术错误。主要的事实是 标签被呈现为一个内联元素。因此，图像被视为字母表，它将位于 a、b、s、A 等基线上。

在上图中，我们可以看到像g和y这样的字母， 有下降者，即这些字母的某些部分位于基线以下。由于 标签被视为内联块元素。当我们将图像放在

标记内时，它会覆盖到基线的区域，而下面的区域则未被使用，被视为空白。这是在容器底部创建间隙的默认行为。

为了摆脱额外的空白，可以使用 3 个属性：

• 使用显示属性
• 使用垂直对齐属性
• 使用 line-height 属性

我们将详细了解这 3 种方法及其实现。让我们开始讨论 CSS 显示属性。

显示属性：最常用的解决方案是使用 display:block 属性将

容器内的 标签的显示属性从默认的“ inline ”值更改为“ block ”。

句法：

display: block;

示例：此示例描述了使用 display 属性去除图像下方的空白。

HTML

输出：

使用 display: block 属性

垂直对齐：垂直对齐属性的值设置为“基线”，默认情况下，它将元素与父元素的基线对齐。属性的值可以从基线更改为底部，如垂直对齐：底部。

句法：

vertical-align: bottom;

示例：此示例描述了使用 vertical-align 属性去除图像下方的空白区域。

HTML

输出：

使用垂直对齐属性

行高属性： CSS line-height-property 可用于设置 默认情况下，行的高度，其值设置为正常。通过将容器的高度设置为 0%，可以去除空白。

句法：

line-height: 0%;

示例：此示例描述了使用 line-height 属性来删除图像下方的空白。

HTML

输出：

使用 line-height 属性