删除无法解释的img边距/空间（CSS）

Question

在我的 WordPress 主题中包含图像时，我在 img 下方有一些无法解释的图像边距/空间。您可以在这里看到它：http://www.wlanradios.net/logitech-squeezebox-radio/

查看内容中的亚马逊徽标图像，或向下滚动并查看带有小缩略图的“ähnliche WLAN Radios”侧边栏小部件。这些图像似乎有一点底部边缘/下面的空间，我无法摆脱。我发现了带有 firebug 的 html/css 但不知道这个边距来自哪里。事实上我尝试过

img {
margin:0!important;
padding:0!important;
border:0!important;
}

覆盖所有可能导致利润的原因，但没有成功。

边距从何而来以及如何去除？

Answer 1

只需放入这些图片即可：

display: block;

更新：

一些解释：

img

是一个内联元素，因此它必须像所有内联元素一样处理空白、行高等。我猜你看到的空间实际上是由行高引起的。因此，如果您想将

img

保留为内联元素，另一个解决方案是设置其父级

line-height: 0;

。

Answer 2

你尝试过：垂直对齐：中间

Answer 3

我已经深入检查了这个问题，它有点像干草竿针之类的事情。

1) Amazon Image box - 问题在于 td 标签，它创建了 6.71667px 的所有边距，这是由 td,th padding 强制创建的，其设置为 0.5em

 th, td {
        border-spacing: 3px;
      //Tweak this Padding of 0.5em and you should destroy Amazon Extra Space
            padding: 0.5em;
        border: 1px solid #CCC;
            }

您应该能够从wp-content/themes/ar2-2-b-2-fixed/styles.css中找到并编辑上述CSS主题的第183行

2）来到第二期 WLAN 无线电图片，由于 DIV 标签填充全部设置为 4px，该图像作用于 WLAN 无线电图片，所以该图像被推入。

以下是问题图片：

亚马逊图像问题已解决图片

希望这有帮助:)

Answer 4

检查 img 元素上的行高，并将其设置为 1。父元素上的行高必须 > 1。

您还可以将这些图像的显示更改为“块”（以避免行距）。

Answer 5

我刚刚通过这个网站找到了问题所在：对抗内联块元素之间的空间

空格的原因是 HTML 中的新行。
如果

<img>

是紧挨着写的，那么就不会有间隙。

要在 HTML 中保留新行，您可以这样编写：

<img src=""><img
src=""><img
src=""><img
src="">

或者您也可以在行间使用注释：

   <img src=""><!--
--><img src=""><!--
--><img src=""><!--
--><img src="">

如果您不使用文本，也可以只使用

font-size: 0px;

。

这里还有另一个 SO 讨论此特定问题的解决方案：
如何删除内联/内联块元素之间的空格？

---

在谷歌搜索

"block vs inline-block"

并看到内联/内联块有间隙后，我意识到我需要搜索

"remove inline block spacing"

，它带来了这里提到的两个链接。

img

标签显然默认使用

display: inline-block;

，但浏览器声称是

inline

。