需要摆脱顶部图像和第二个 div 之间的 space

Question

所以我正在尝试建立一个网站，我希望绿色导航栏与图像底部齐平。但是，无论我对源代码进行什么更改，css 它仍然会留下 space。有谁知道如何解决这个问题？

HTML:

<body>
  <img src="xyz.gif">
  <div class="hasbackground">
     ...
  </div>
</body>

CSS:

.hasbackground { background-color: blue; }

这是一个 JSFiddle 示例：http://jsfiddle.net/a1mn0ytz/

谢谢

Answer 1

删除图像上的 2 像素边框。

改变

<img width="946" height="246" style="border:2px solid #000000" alt="dogwash" src="Banner.jpg">

至

<img width="946" height="246" alt="dogwash" src="Banner.jpg">

Answer 2

图片属性边框如下：

border: 2px solid #000000;

改成如下：

border-left: 2px solid #000000;
border-right: 2px solid #000000;

Answer 3

您的图像是 display: inline，但它需要是 display: block。 inline 或 inline-block 的元素将白色 space 视为内联元素（例如，这些词之间的 space。）显然，有时可以垂直显示。

Need to get rid of space between top image and second div