图像和 div 之间的奇数空间 (CSS)答案

【问题标题】：Odd space between image and div (CSS)图像和 div 之间的奇数空间 (CSS)
【发布时间】：2014-03-30 09:13:31
【问题描述】：

这有点微不足道，但是当 div 和图像应该彼此齐平嵌套时，我经常遇到由空格分隔的问题。

下面是我现在正在处理的一些代码。如您所见，第二个 div（Shadow2 类）包含一个图像，然后是一个包含文本的 div。 Black 类为标题提供黑色背景。因此，访问者应该只看到带有白色文本的黑框上方的图像。取而代之的是，在 img 和标题 div 之间可以看到 Shadow2 的默认背景颜色。

<div class="Cool R P Max300">
  <div class="Shadow2">
    <img src="">
    <div class="Caption Black">Text</div>
  </div>
</div>

我添加了样式，将所有图像的边框和内边距设置为 0，并将 div.Caption 的上边距设置为 0，但它没有改变任何内容。

我可以通过对图像应用相对位置并将其降低几个像素来解决问题，但这对于必须是常见错误的修复似乎毫无意义。谁能告诉我这里发生了什么？谢谢。

【问题讨论】：

标签： css

【解决方案1】：

可能有一些空格导致此换行符。只需将图像设置为display: block; 即可解决问题。另外，不要忘记关闭您的 img 标签（<img src="" alt="" />），但这与空白无关。

另一个骇人听闻的解决方案是将 font-size: 0; 放在父 div 上。当然，你必须为你的标题 div 指定字体大小。

【讨论】：