删除无法解释的 img 边距/空格 (CSS)

Posted 2023-03-06

技术标签:

【中文标题】删除无法解释的 img 边距/空格 (CSS)【英文标题】：Remove unexplainable img margin/space (CSS) 【发布时间】：2014-01-14 07:26:31 【问题描述】：

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

查看内容内的亚马逊徽标图像或向下滚动并查看带有小缩略图的“Ähnliche WLAN Radios”侧边栏小部件。图像似乎有一点底边距/下方的空间我无法摆脱。我发现了带有萤火虫的 html/css，但没有得到它的边距来自哪里。我其实尝试过

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

覆盖所有可能的边距原因，但没有成功。

边距从何而来，如何去除？

【问题讨论】：

有没有更多选择器的说明符？例如img.class#id ?然后可以进行覆盖。当然，边距来自父元素，而不是 img 本身。我可以使用附加类，但我虽然尝试了元素样式<img style="margin:0!important; pading:0!important" >，但没有成功。你看到我正在谈论的图像底部的边距了吗？这很好奇，因为 css 中没有什么可以解决这个问题？！ @aldux 它更多的是在 img 元素和以下元素下方的空格。如果我在萤火虫中发现它，我看不到高亮边距。 【参考方案1】：

只要放到那些图片上：

display: block;

更新：

一些解释：img 是一个内联元素，所以它必须像所有内联元素一样处理空格、行高等。我猜你看到的空间实际上是由行高引起的。因此，如果要将 img 保留为内联元素，另一种解决方案是设置其父级 line-height: 0;。

【讨论】：

【参考方案2】：

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

1) 亚马逊图片框 - 问题在于 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

2) 谈到 WLAN Radios Pic 的第二个问题，由于 DIV 标签 Padding 全部设置为 4px，该图像被推送到 WLAN Radio 图片上。

这是问题图片：

亚马逊图片问题解决图片

希望这会有所帮助:)

【讨论】：

感谢您的方法。但问题与填充无关（因为它们是需要的，移除并不能解决问题）。该空间与 img 未定义为像 enguerranws 指出的块元素有关。【参考方案3】：

你试过了吗：vertical-align: middle

【讨论】：

【参考方案4】：

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

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