css - 图像和 div 之间的奇数空间 (CSS)

Question

这有点微不足道，但我经常遇到 div 和图像之间的问题，这些 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，但它没有改变任何内容。

我可以通过对图像应用相对位置并将其降低几个像素来解决这个问题，但这似乎是一个毫无意义的修复，因为它一定是一个常见的错误。谁能告诉我这是怎么回事？谢谢。

Answer 1

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

在这里查看:http://jsfiddle.net/fkfF7/

---

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

这是那个:http://jsfiddle.net/fkfF7/1/