在我的 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;
}
覆盖所有可能导致利润的原因,但没有成功。
边距从何而来以及如何去除?
只需放入这些图片即可:
display: block;
更新:
一些解释:
img
是一个内联元素,因此它必须像所有内联元素一样处理空白、行高等。我猜你看到的空间实际上是由行高引起的。因此,如果您想将 img
保留为内联元素,另一个解决方案是设置其父级 line-height: 0;
。
你尝试过:垂直对齐:中间
我已经深入检查了这个问题,它有点像干草竿针之类的事情。
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 无线电图片,所以该图像被推入。
以下是问题图片:
亚马逊图像问题已解决图片
希望这有帮助:)
检查 img 元素上的行高,并将其设置为 1。父元素上的行高必须 > 1。
您还可以将这些图像的显示更改为“块”(以避免行距)。
我刚刚通过这个网站找到了问题所在:对抗内联块元素之间的空间
空格的原因是 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
。