Question

这有点微不足道，但我经常遇到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>

我添加了设置所有图片的样式＆＃39;边框和填充为0并将div.Caption的上边距设置为0，但它不会改变任何内容。

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

Answer 1

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

另一个hackish解决方案是将font-size: 0;放在父div上。当然，您必须为字幕div指定字体大小。